在上传之前使用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">

Answer 2

放以下代码中循环

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

};