Как создать эскизы из нескольких входов HTML?

Question

У меня есть вход, как это:

<input type="file" multiple> 

И я хочу, чтобы создать эскиз из любого изображения, которое получает выбранный на входе (если есть 5 изображений, создавать 5 миниатюр). Я видел много реализаций, но не с несколькими полями.

Любая помощь будет оценена по достоинству. Благодарю.

Answer 1

В событии .change для input вы можете прокручивать каждый из файлов и просто добавлять его в div или что угодно.

Рабочий пример

$('input[type="file"]').on('change', function() { 
 
    for (var i = 0; i < this.files.length; i++) { 
 
    var fr = new FileReader(); 
 
    fr.onload = function(e) { 
 
     $('#thumbs').append('<img src="' + e.target.result + '" width="50px" height="50px">') 
 
    } 
 
    fr.readAsDataURL(this.files[i]); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" multiple> 
 
<div id="thumbs"> 
 

 
</div>

Answer 2

Вы можете просмотреть несколько файлов, таких как следующие.

$('input[type="file"]').change(function() { 
 
    $('.thumbnail').html(''); 
 
    $.each(this.files, function() { 
 
    readURL(this); 
 
    }) 
 
}); 
 

 
function readURL(file) { 
 
    var reader = new FileReader(); 
 
    reader.onload = function(e) { 
 
    $('.thumbnail').append('<img src=' + e.target.result + ' style="width: 100px; height: 120px;"/>'); 
 
    } 
 

 
    reader.readAsDataURL(file); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" multiple/> 
 
<div class="thumbnail"></div>