上传图片后显示图片预览

Question

我的视图包含不同员工的详细信息，我必须为每个员工上传图像并最终保存。我想在保存之前查看每个图像的图像预览，但它采用本地主机路径，不显示图像预览。它显示错误:"NetworkError: 404not Found localhost:3000/Rails.png“

在视图中

<% @person.each do |person| %>

​

<td><%= person.name %></td>
<td><%= person.date %></td>
<td><input id="<%= person.id %>"  type='file' class="imageUploader" multiple="true" ></td>

 <td class="image_container"> <img id="image_<%= person.id %>" src="#" alt="Image" width="100" height="100"></td>` here
</tr>
  <% end %>

在appliction.js中：

    $('.imageUploader').change(function() {
 var target_image = $(this).val();
 $(this).parent('td').parent("tr").children('td.image_container').html("<img src="+target_image+">");
 console.log(target_image);
});

Answer 1

伙计，又来了一个...........`

    FILEFIELD = {}
     $(document).ready(function() {    

     $('.files').change(function() {

        FILEFIELD = $(this)
        var fr = new FileReader;


        fr.onload = function() {
            var img = new Image;
            img.onload = function() {
           var c=$(FILEFIELD).parent("td").parent("tr").children("td").children(".images")[0];
                var ctx=c.getContext("2d");
                ctx.drawImage(img,0,0,50,50);      

         }
            img.src = fr.result;

        };

        fr.readAsDataURL(this.files[0]);

    });
});

终于可以工作了

Answer 2

好吧，我尝试了你所说的，并在我的应用程序中得到了图像预览，这样做：

查看我的视图

<% if current_user %>
   <p>Welcome <%= current_user.email %></p>
   <tr><input type="file" id="files" name="files[]" multiple />
   <img id="list" src="#" alt="Image" width="100" height="100"></img></tr>
<% end %>


<style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>


<script type="text/javascript">
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

正如你所看到的，上面的代码是由我在上传之前考虑到单个用户图像预览而完成的。但是，您也可以通过为多个用户更改查询和少量代码来对多个用户执行相同的操作。

干杯!