JavaScript的閱讀和預覽多個圖像

這裏讀取多個圖像的代碼是：

HTML

<input id="browse" type="file" onchange="previewFiles()" multiple>

的JavaScript

function previewFiles() { 
    var preview = document.querySelector('#preview'); 
    var files = document.querySelector('input[type=file]').files; 
    function readAndPreview(file) { 
    // Make sure `file.name` matches our extensions criteria 
    if (/\.(jpe?g|png|gif)$/i.test(file.name)) { 
     var reader = new FileReader(); 

     reader.addEventListener("load", function() { 
     var image = new Image(); 
     image.height = 100; 
     image.title = file.name; 
     image.src = this.result; 
     preview.appendChild(image); 
     }, false); 

    reader.readAsDataURL(file); 
    } 

    } 

    if (files) { 
    [].forEach.call(files, readAndPreview); 
    } 

}

我有一個問題，因爲我不完全理解發生了什麼，爲什麼它不預覽/好像它存儲多個文件。

來源

2017-01-20 AESTHETICS

中包含的代碼的主要問題是，有一個id preview（參考：var preview = document.querySelector('#preview');）沒有元素

添加此，它會工作。但是，您可以跳過FileReader，因爲它不是必需的。相反，將文件視爲Blob（它們本質上相同）並使用createObjectURL() - 如果要顯示大量圖像，則性能和內存佔用情況會更好。

document.querySelector('#browse').onchange = function() { 
 
    var preview = document.querySelector('#preview'); 
 
    [].forEach.call(this.files, function(file) { 
 
    if (/image\/.*/.test(file.type)) { // use any image format the browser can read 
 
     var img = new Image; 
 
     img.onload = remURL;    // to remove Object-URL after use 
 
     img.style.height = "100px";  // use style, "width" defaults to "auto" 
 
     img.src = (URL || webkitURL).createObjectURL(file); 
 
     preview.appendChild(img);   // add image to preview container 
 
    } 
 
    }); 
 
    
 
    function remURL() {(URL || webkitURL).revokeObjectURL(this.src)} 
 
};

<input id="browse" type="file" multiple> 
 
<div id=preview></div> <!-- an element with this ID was missing -->

來源

2017-01-23 22:15:56 K3N

-1

你的代碼的最後幾行：

if (files) { 
    [].forEach.call(files, readAndPreview); 
}

應該沒什麼事。它適用於每個空數組。我認爲你試圖做這樣的事情：

files.forEach(readAndPreview)

這實際上會在所有文件的文件數組中，並呼籲readAndPreview他們。

來源

2017-01-20 11:20:18 Amit

這將不會工作，因爲文件包含一個文件列表的對象，而不是一個數組，並且不具有一個foreach（）方法。 – K3N

['function.call']（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call）用指定的'this' arg調用函數。在這種情況下，'Array.prototype.forEach'在'files'上運行 – Jake

JavaScript的閱讀和預覽多個圖像

回答

相關問題