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