上传成功后显示上传的图片

我正在 Magnific Popup（灯箱）内使用 Carrierwave gem。我想做的是after上传图片，它将显示新上传的图片。

目前，从灯箱上传图像后，它将继续显示您最初查看的图像，并显示“成功”消息，表明您的图像已成功上传。

当前的设置是用户单击照片，将打开一个包含画廊照片的灯箱。在灯箱内，您可以删除当前照片、上传新照片或将其设为您的头像。

照片.js.咖啡：

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

显示.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
            [email protected] /cdn-cgi/l/email-protection_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/ http://blueimp.github.io/jQuery-File-Upload/

• 复杂的任务，例如停止上传请求。
• 使用浏览器上传，无需 XHR 文件上传
• 异步上传

它还具有文档https://github.com/blueimp/jQuery-File-Upload/wiki/API 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());
});

Demo http://jsfiddle.net/margusmartsepp/83w51u85/ http://jsfiddle.net/margusmartsepp/83w51u85/