Question

我正在使用Magnific Popup（灯箱）中的Carrierwave宝石。我想要做的是在上传图片后会显示新上传的图片。

目前，从灯箱上传图片后，它会继续显示您最初查看的图像，并且成功＆＃34;您的图片已成功上传的消息。

当前设置是用户点击将打开带有图库照片的灯箱的照片。在灯箱内，您可以删除当前照片，上传新照片或将其设为您的头像。

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%")

Answer 1

我个人更喜欢使用http://blueimp.github.io/jQuery-File-Upload/

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

它还有文档https://github.com/blueimp/jQuery-File-Upload/wiki/API

如果您想自己发送，请将json发送回图片网址。

var imageurl = "";
$('#inputValue').attr("src", imageurl);

例如，我将输入值绑定到url

$('#inputName').bind('input',function(){ 
   $('#inputValue').attr("src", $(this).val());
});

演示http://jsfiddle.net/margusmartsepp/83w51u85/

Answer 2

你这样做很复杂..

这是一个简单的解决方案。编写javascript函数，使用ajax发送所选图像。

<script>
   var client = new XMLHttpRequest();  
   function upload_banner() 
   {
        var file = document.getElementById("file");
        var formdata = new FormData();
        formdata.append("file", file.files[0]);
        var files=document.getElementById('file').files;
        var file_name=files[0].name;
        //alert(file_name);
        var file_extension=file_extension_get(file_name);

        if( file_extension == "jpg" || file_extension == "JPG" || file_extension == "jpeg" || file_extension == "JPEG" || file_extension == "gif" || file_extension == "GIF" || file_extension == "png" || file_extension == "PNG" )
        {
            client.open("post", "small_img.php", true);
            client.send(formdata);  /* Send to server */    

        }
        else
        {
            alert("Wrong file format");
        }
    }
   /* Check the response status */  
   client.onreadystatechange = function() 
   {
    alert(client.readyState+"sssss"+client.status);
      if (client.readyState == 4 && client.status == 200) 
      {

         var m=client.responseText.toString();

          $("#upload_img_view").html(m);
  upload_id();

        }
   }   
   function file_extension_get(file)
   {
        return (/[.]/.exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : '';
    }

function upload_id()
    {

        var uploadid=document.getElementById('upload_id').value;
        $("#banner_id").val(uploadid);
        return true;
    }

</script>

+++++++++++++++++++++++++++++++++++++++++++++++ +++++

在Html文件中编写以下代码以上传文件..

<input type="file" id="file"  name="file" onchange="upload_banner()" required name="file_create_video">             <br>

<div class="uplod-img" id="upload_img_view">

+++++++++++++++++++++++++++++++++++++++++++++++ +++

在php文件中使用下面的代码small_img.php

$path = "/var/www/upload/profile_pic/";

if(move_uploaded_file($tmp, $path.$actual_image_name))
{
echo "<img src='$u' height='100%' width='100%'> <input type='hidden' id='upload_id' name='upload_id' value='$k' >";
}

这对我有用...试试吧......根据你的代码做一些改变

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

2 个答案: