JSファイルサイズのテストは複数のファイルアップロードで失敗しますが、1つのファイルアップロードでは失敗します

Question

イメージをアップロードしようとしていますが、その前にタイプとサイズに基づいて無効なファイルが表示されています。サイズが5MBのファイルを1つアップロードするとうまくいきます。しかし、私はこの5メガバイトの画像を含む複数のファイルを選択すると、私のテストは失敗し、そのサイズが2以上であることは検出されません。あなたが結合機能にfile.sizeを追加する必要が

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を使用すると、ループ内の最後のファイルを参照しています。

$("#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