javascript - 如何在提交前显示掉落图像的缩略图

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

}

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