JavaScript для чтения и предварительного просмотра нескольких изображений

Question

Я нашел код для чтения нескольких изображений на internet.

Вот код:

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); 
    } 

} 

У меня проблема с этим, так как я не совсем понимаю, что происходит и почему он не просматривает/кажется, что он хранит несколько файлов.

Answer 1

Основной проблемой во включенном коде является то, что не существует элемент с идентификатором preview (Ref: 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 -->

Answer 2

Ваши последние строки кода:

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

не должны делать ничего. Он идет для каждого по пустому массиву. Я думаю, что вы пытаетесь сделать что-то вроде:

files.forEach(readAndPreview) 

Что бы фактически пробежаться через все файлы в массиве файлов и вызова readAndPreview для них.