JS文件大小測試失敗，多個文件上傳，但不是單個文件上傳

Question

我想上傳圖像，並在此之前，根據類型和大小顯示哪些文件無效。當我上傳大小爲5MB的單個文件時，它工作正常。但是，當我選擇多個文件，包括這5MB圖片我的測試失敗，沒有檢測到它的大小超過2.你認爲這個問題是什麼？

JSFIDDLE DEMO

<input type="file" name="file[]" id="image-upload" class="file-input" accept="image/*" multiple> 

<div id="img-wrapper"></div> 
<hr> 
<div id="invalid-images"></div> 

<style type="text/css"> 
    .invalid-img-thumbnail{ 
     width: 100px; 
     height:100px; 
     border: 2px solid red; 
    } 
    .thumbnail{ 
     width: 100px; 
     height:100px; 
    } 
</style> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 

<script type="text/javascript"> 
var valid_extensions = ["jpg", "jpeg", "png", "gif"]; 
$("#image-upload").change(function() { 
    var files = $(this)[0].files; 

    for (var i = 0; i < files.length; i++) { 
     var file = files[i]; 
     var reader = new FileReader(); 

     reader.onload = (function(name, event) { 
      var img = event.target.result; //image preview 
      var extension = name.split('.')[name.split('.').length - 1].toLowerCase(); //get file extension 

      if(valid_extensions.indexOf(extension)===-1 || file.size > (2000 * 1024)){ //if extension is valid image extension type and size is less that 2mb 
       $('#invalid-images').append(
        "<img class='invalid-img-thumbnail' src='" + img + "'" + "title='" + name + "'/>"); 

      }else{ 
       $('#img-wrapper').append(
        "<img class='thumbnail' src='" + img + "'" + "title='" + name + "'/>"); 
       console.log('\n'+file.size);     
      } 
     }).bind(reader, file.name); 
     reader.readAsDataURL(file); 
    } 
}); 
</script> 

Answer 1

您需要添加file.size的功能結合。否則，當您在回調函數中使用file.size時，它指的是循環中的最後一個文件。

$("#image-upload").change(function() { 
    var files = $(this)[0].files; 

    for (var i = 0; i < files.length; i++) { 
     var file = files[i]; 
     var reader = new FileReader(); 

     reader.onload = (function(name, size, event) { 
      var img = event.target.result; //image preview 
      var extension = name.split('.')[name.split('.').length - 1].toLowerCase(); //get file extension 

      if(valid_extensions.indexOf(extension)===-1 || size > (2000 * 1024)){ //if extension is valid image extension type and size is less that 2mb 
       $('#invalid-images').append(
        "<img class='invalid-img-thumbnail' src='" + img + "'" + "title='" + name + "'/>"); 

      }else{ 
       $('#img-wrapper').append(
        "<img class='thumbnail' src='" + img + "'" + "title='" + name + "'/>"); 
       console.log('\n'+size);     
      } 
     }).bind(reader, file.name, file.size); 
     reader.readAsDataURL(file); 
    } 
}); 

DEMO