javascript - 在上传之前使用 jquery 预览图像

Question

当我使用下面的输入仅上传 1 张图片时，我可以使用 jquery 代码预览它。

<input type="file" id="uploadImage" onchange="Preview_Image_Before_Upload('uploadImage', 'uploadPreview');" name="termek_file" class="file_input"/><img id="uploadPreview" class="uploadPreview" width="200" />

function Preview_Image_Before_Upload(fileinput_id, preview_id) 
{
    var oFReader = new FileReader();
    oFReader.readAsDataURL(document.getElementById(fileinput_id).files[0]);
    oFReader.onload = function (oFREvent) 
    {
        if ( window.FileReader && window.File && window.FileList && window.Blob )
        {
            document.getElementById(preview_id).src = oFREvent.target.result;
        }
    };
};

如何让此预览代码与多张图片上传一起使用？

<input type="file" multiple name="gallery[]">

Answer 1

试试这个

window.onload = function() {
  if (window.File && window.FileList && window.FileReader) {
    var filesInput = document.getElementById("uploadImage");
    filesInput.addEventListener("change", function(event) {
      var files = event.target.files;
      var output = document.getElementById("result");
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if (!file.type.match('image'))
          continue;
        var picReader = new FileReader();
        picReader.addEventListener("load", function(event) {
          var picFile = event.target;
          var div = document.createElement("div");
          div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
            "title='" + picFile.name + "'/>";
          output.insertBefore(div, null);
        });        
        picReader.readAsDataURL(file);
      }

    });
  }
}

<input type="file" id="uploadImage" name="termek_file" class="file_input" multiple/>
<div id="result" class="uploadPreview">