在jQuery中多圖像上傳之前無法打印文件名

Question

我試圖在上傳之前獲取圖像預覽及其名稱。但不能爲每個圖像打印正確的名稱。我曾嘗試

event.target.name返回「未定義」和file.name這對於所有其他圖像返回第一個圖像的名稱。任何幫助，將不勝感激。

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


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

<script type="text/javascript"> 
    $("#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(event){      
       var img = event.target.result; 

       console.log(event.target.name); //prints 'undefined' 
       console.log(file.name);   //prints 1st image's name for all images 

       $('#img-wrapper').append("<img class='thumbnail' src='" + img + "'" + 
         "title='" + file.name + "'/>"); 

      }; 

      reader.readAsDataURL(file); 
     }        

    }); 
</script> 

Answer 1

event.target.name是不確定的，因爲事件的目標是FileReader對象，而不是文件：

EXAMPLE

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

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

     // Give the reader a name 
     reader.name = 'Reader #' + i; 

     reader.onload = function(event) { 
      // Append the reader's name to the output 
      $("#img-wrapper").append('<div>' + event.target.name + '<div>'); 
     }; 
    }; 

    reader.readAsDataURL(file); 
}); 

關於你的文件名問題，FileReader是異步的。 From MDN：

的對象的FileReader讓Web應用程序異步讀取存儲在用戶的計算機上的文件（或原始數據緩存），使用文件或BLOB對象到指定的文件或數據的內容閱讀。

這意味着你的for循環完成其所有的迭代中onload回調被解僱，並file總會代表在循環看到的最後一個項目之前。當onload函數被觸發時，它們都具有正確的結果（圖像），因爲您使用的是事件對象，但它們全都使用相同的file。

EXAMPLE

$("#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.name = 'Reader #' 
     reader._i = i; 

     $('#img-wrapper').append("<div>LOOP #" + i + "</div>"); 

     reader.onload = function(event) { 
      var img = event.target.result; 
      $('#img-wrapper').append("<div>READER #" + this._i +"</div>"); 

     }; 

     reader.readAsDataURL(file); 
    }        

}); 

你將不得不調整你的代碼可以做你想做的事情。

第二個想法，你可能不需要重組任何東西。您可以綁定onload功能爲每個讀者，並通過在文件的名稱：

EXAMPLE

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

     // Note that parameters are reordered due to binding below 
     reader.onload = (function(name, event) { 
     var img = event.target.result; 
     $('#img-wrapper').append(
      "<img class='thumbnail' src='" + img + "'" + "title='" + name + "'/>"); 
     }).bind(reader, file.name); 

     reader.readAsDataURL(file); 
    } 
});