成功上传后显示上传的图像
我在Magnific Popup（灯箱）里面使用了Carrierwavegem。 我想要做的是， 在上传图像后，它将显示新上传的图像。
目前，从灯箱上传图像后，它将继续显示您最初查看的图像，并显示成功上传图像的“成功”消息。
当前设置是用户点击一张照片，该照片将打开带有图库照片的灯箱。 在灯箱内，您可以删除当前照片，上传新照片或将其设为您的头像。
photos.js.coffee：
jQuery -> $('form#new_photo').fileupload dataType: "script" add: (e, data) -> file = data.files[0] data.context = $(tmpl("template-upload", file)) $('#new_photo').append(data.context) data.submit() progress: (e, data) -> if data.context progress = parseInt(data.loaded / data.total * 100, 10) data.context.find('.bar').css('width', progress + '%') stop: (e, data) -> $('.upload').hide() 照片控制器：
def create @photo = Photo.create(params[:photo]) @photo.user = current_user if @photo.save flash[:notice] = "Successfully created photos." redirect_to :back else render :action => 'new' end end
show.html.slim：
-if @user.photos.present? .slider_container h4 Photos a.left_arrow href="#" img alt="" src="/assets/left_arrow.png" / ul.slider.parent-container = hidden_field_tag 'current_index',0 -@user.photos.each_with_index do |photo, index| li class="#{index > 2 ? 'hide' : ''}" = link_to image_tag(photo.image_url(:thumb)), "#" + dom_id(photo) div id="#{dom_id(photo)}" class="mfp-hide" center = image_tag(photo.image_url(:popup)) - if @user == current_user = button_to('Set as Profile Image', [:avatar, photo], class: 'btn') ' = button_to "remove", photo, :confirm => 'Are you sure?', :method => :delete, class: 'btn' = form_for Photo.new do |f| = f.label :image, "Upload photos:" = f.file_field :image, multiple: true, name: "photo[image]" script#template-upload type="text/x-tmpl" .upload | {%=o.name%} .progress .bar style=("width: 0%")
我个人更喜欢使用http://blueimp.github.io/jQuery-File-Upload/
- 复杂的任务，如停止上传请求。
- 使用没有XHR文件上传的浏览器上传
- 异步上传
它还有文档https://github.com/blueimp/jQuery-File-Upload/wiki/API
如果你想自己发送json，请回复图片url。
var imageurl = ""; $('#inputValue').attr("src", imageurl);
例如，我将输入值绑定到url
$('#inputName').bind('input',function(){ $('#inputValue').attr("src", $(this).val()); });
演示http://jsfiddle.net/margusmartsepp/83w51u85/
你这样做非常复杂..
这是简单的解决方案。编写javascript函数以使用ajax发送所选图像。
++++++++++++++++++++++++++++++++++++++++++++++++++ ++
在Html文件中写下面的代码来上传文件..
++++++++++++++++++++++++++++++++++++++++++++++++++
在php文件中使用下面的代码small_img.php
$path = "/var/www/upload/profile_pic/"; if(move_uploaded_file($tmp, $path.$actual_image_name)) { echo "
"; }
这对我有用…试试吧..根据你的代码做一些改变