如何在提交之前显示丢弃图像的缩略图

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

  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);
    }
 }

}

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

Answer 2

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

此代码使用 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;
}