在上傳之前使用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; 
    } 
}; 

};