Search code examples
javascriptjqueryhtmlmulti-upload

How can I create thumbnails from a multiple HTML input?

I have an input like this:

<input type="file" multiple>

And I want to create a thumbnail from every image that gets selected in the input (if there are 5 images, create 5 thumbnails). I've seen a lot of implementations, but none with a multiple field.

Any help would be appreciated. Thanks.

Solution

  • In the .change event for the input, you can loop through each of the files, and just append it to a div or whatever you want.

    Working Example

    $('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>