jQuery在上傳之前顯示多個圖像縮略圖

Question

我在上傳之前爲圖像預覽製作了代碼，但存在一個問題。 我如何製作prewiev多張圖片。 例如我有3張圖片，所以jQuery會知道有多少div必須爲這些圖片製作。

我認爲我必須使用for循環，但不知道如何。

這是我在HTML，CSS代碼，和jQuery

<input id="file" type="file" name="file[]" required multiple/> 
<div id="imagePreview"></div> 
<script> 
    $(function() { 
     $("#file").on("change", function() 
     { 
      var files = !!this.files ? this.files : []; 
      if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support 

      if (/^image/.test(files[0].type)){ // only image file 
      var reader = new FileReader(); // instance of the FileReader 
      reader.readAsDataURL(files[0]); // read the local file 

      reader.onloadend = function(){ // set image data as background of div 
      $("#imagePreview").css("background-image", "url("+this.result+")"); 
      } 
     } 
    }); 
}); 
</script> 
<style> 
#imagePreview { 
    width: 180px; 
    height: 180px; 
    background-position: center center; 
    background-size: cover; 
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3); 
    display: inline-block; 
} 
</style> 

Answer 1

的解決方案是here

我只是改變主腳本是這樣的：

var inputLocalFont = document.getElementById("file"); 
inputLocalFont.addEventListener("change",previewImages,false); 

function previewImages(){ 
    var fileList = this.files; 

    var anyWindow = window.URL || window.webkitURL; 

     for(var i = 0; i < fileList.length; i++){ 
      var objectUrl = anyWindow.createObjectURL(fileList[i]); 
      $('#imagePreview').append('<img src="' + objectUrl + '" />'); 
      window.URL.revokeObjectURL(fileList[i]); 
     }  
}