如何在提交之前显示已删除图像的缩略图

Question

<div class="top-main-section">
  <%= form_for @usr_vendor_web_slide ,url:{action: "slidecreate"} , html: {class: "form-horizontal"} do |f| %>
    <div class="top-main-section-area">
      <div id="upload-area" class="uploader1" onclick="$('#post_image').click()">
        <%= f.file_field :images, :onchange => 'readURL(this)', class:'slide-img', multiple: true, id:'slide-img'%>
          <img id="slide_image" src="#" alt="image" style="display: none;" class="slide_image" />
      </div>
    </div>
    <%= f.submit({:class => 'btn btn-primary'}) %>
  <% end %>
</div>

<div id="thumbnail" class="thumbnail">
  <img id="slide_image1" src="#" alt="" style="" />
</div>

javascript文件

var data = [];

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        var ids = $("#slide_image");
        insert();

        function insert() {
            var id;
            id = ids;
            data.push({
                id: id,
            });
            clearAndShow()
        }

        function clearAndShow() {
            // Clear our fields
            ids = "";
            console.log(data)
        }
        reader.onload = function(e) {
            $("#slide_image").style.display = 'block';
            $('#slide_image').attr('src', e.target.result).width(1000).height(480);
            $("#slide_image").style.display = 'block';
            $('#slide_image1').attr('src', e.target.result).width(100).height(100);
        };
        reader.readAsDataURL(input.files[0]);
    }
}

我试图在提交之前显示图像缩略图。我将在顶部主要部分区域显示当前丢弃的图像，并在缩略图部分显示缩略图。但我想在提交之前在缩略图部分显示所有缩略图。我将尝试制作一个javascript数组并将图像存储在该数组中。但我不能让图像src显示在缩略图部分。感谢你的想法

Answer 1

显示用户选择上传的图像的缩略图预览将帮助用户确保选择正确的图像。以下是可以将图像预览显示为所选对象的缩略图的代码。您可以尝试选择或拖放以预览图像。

此代码使用HTML5功能，可能无法与旧浏览器一起使用。此代码使用的两个主要HTML5功能是FileReader和Canvas。

使用Javascript

jQuery(function($){
var fileDiv = document.getElementById("upload");
var fileInput = document.getElementById("upload-image");
console.log(fileInput);
fileInput.addEventListener("change",function(e){
  var files = this.files
  showThumbnail(files)
},false)

fileDiv.addEventListener("click",function(e){
  $(fileInput).show().focus().click().hide();
  e.preventDefault();
},false)

fileDiv.addEventListener("dragenter",function(e){
  e.stopPropagation();
  e.preventDefault();
},false);

fileDiv.addEventListener("dragover",function(e){
  e.stopPropagation();
  e.preventDefault();
},false);

fileDiv.addEventListener("drop",function(e){
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;

  showThumbnail(files)
},false);

function showThumbnail(files){
  for(var i=0;i<files.length;i++){
    var file = files[i]
    var imageType = /image.*/
    if(!file.type.match(imageType)){
      console.log("Not an Image");
      continue;
    }

    var image = document.createElement("img");
    // image.classList.add("")
    var thumbnail = document.getElementById("thumbnail");
    image.file = file;
    thumbnail.appendChild(image)

    var reader = new FileReader()
    reader.onload = (function(aImg){
      return function(e){
        aImg.src = e.target.result;
      };
    }(image))
    var ret = reader.readAsDataURL(file);
    var canvas = document.createElement("canvas");
    ctx = canvas.getContext("2d");
    image.onload= function(){
      ctx.drawImage(image,100,100)
    }
  }
}
          });

HTML

<input type="file" style="display:none" id="upload-image" multiple="multiple"></input>
<div id="upload" class="drop-area">
   Upload File
</div>
<div id="thumbnail"></div>

CSS

.drop-area{
  width:100px;
  height:25px;
  border: 1px solid #999;
  text-align: center;
  padding:10px;
  cursor:pointer;
}
#thumbnail img{
  width:100px;
  height:100px;
  margin:5px;
}
canvas{
  border:1px solid red;
}

Answer 2

  function readURL(input) {


    if (input.files && input.files[0]) {
        var reader = new FileReader();


        reader.onload = function (e) {

            document.getElementById("slide_image").style.display = 'block';
            $('#slide_image')
                .attr('src', e.target.result)
                .width(1000)
                .height(480);







        };
        reader.readAsDataURL(input.files[0]);



    }
   }

window.onload = function() {
document.getElementById('files').addEventListener('change', 
handleFileSelect, false);


function handleFileSelect(evt) {

    console.log("hariii");
    var files = evt.target.files;

    // 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 style="height: 75px; border: 1px solid #000; 
margin: 5px" src="',
                        e.target.result,
                        '" title="', escape(theFile.name),
                        '"/>'
                    ].join('');

                document.getElementById('thumbnail').insertBefore(span, 
null);
            };
        })(f);

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

}

这是我的解决方案，它适用于我的项目