如何在文件選擇上讀取（圖像數據/尺寸/文件大小/名稱）多個圖像？

Question

我得到相同的圖像多次。

document.getElementById('getFile').addEventListener('change', getFiles); 
 
function getFiles(ev){ 
 
    var file= ev.target.files; 
 
    if (file) { 
 
     for(var i=0,f; f = file[i]; i++){ 
 
      if(!f.type.match('image.*')){continue;} 
 
      var reader = new FileReader(); 
 
      reader.readAsDataURL(file[i]); 
 
      reader.onload = function() { 
 
       var img = new Image(); 
 
       img.onload = function() { 
 
        var span = document.createElement('span'); 
 
        span.innerHTML = ['<img width="100" id="thumb" src="', img.src,'"/>'].join(''); 
 
        document.body.appendChild(span, null); 
 
        var l = document.createElement('span'); 
 
        l.innerHTML=img.width+'x'+img.height; 
 
        span.appendChild(l); 
 
        span.style="border:1px solid black; border-radius:5px; display:block"; 
 
       }; 
 
       img.src = reader.result; 
 
      }; 
 
     } 
 
    } 
 
}

<input id="getFile" type="file" multiple accept="image/jpeg">

我想用一個尺寸和圖像名稱標籤圖像的列表。

Answer 1

這是合乎邏輯的，因爲你的onload = async。因此，for循環第二次通過閱讀器參考更新到下一個閱讀器。因此，將顯示reader.result對最後創建的讀者的引用，因此僅顯示該結果。您很可能只會在屏幕上看到最新的圖片。爲了解決這個問題，你可以使用一個匿名函數來創建一個新的範圍。例如（工作小提琴：https://jsfiddle.net/r9ecbLy5/）：

document.getElementById('getFile').addEventListener('change', getFiles); 

function getFiles(ev) { 
    var file = ev.target.files; 
    if (file) { 
    for (var i = 0, f; f = file[i]; i++) { 
     if (!f.type.match('image.*')) { 
     continue; 
     } 
     // Create a scope where file and reader will not be overwritten by the next loop 
     (function(fileToUse){ 
     var reader = new FileReader(); 
     reader.readAsDataURL(fileToUse); 
     reader.onload = function() { 
      var img = new Image(); 
      img.onload = function() { 
      var span = document.createElement('span'); 
      span.innerHTML = ['<img width="100" id="thumb" src="', img.src, '"/>'].join(''); 
      document.body.appendChild(span, null); 
      var l = document.createElement('span'); 
      l.innerHTML = img.width + 'x' + img.height; 
      span.appendChild(l); 
      span.style = "border:1px solid black; border-radius:5px; display:block"; 
      }; 
      img.src = reader.result; 

     // This reader result, was always the last one. 
     // Because reader was overwritten. 
     }; 
     })(file[i]); 

    } 
    } 
} 

Answer 2

使用功能

escape(); 

我現在能得到目標文件名信息。