Preview images before upload

Question

I have a page with four images for the user to select. I want the user to be able to preview each image on the site before upload.

The JavaScript code below works for only one image but I would like it to work for multiple images uploaded via <input type="file">.

What will be the best way to do this?

function readURL(input) {     if (input.files && input.files[0]) {         var reader = new FileReader();          reader.onload = function (e) {             $('#output').attr('src', e.target.result);         }          reader.readAsDataURL(input.files[0]);     } }  $("#file-input").change(function () {     readURL(this); }); 

Answer 1

Here is jQuery version for you. I think it more simplest thing.

$(function() {      // Multiple images preview in browser      var imagesPreview = function(input, placeToInsertImagePreview) {            if (input.files) {              var filesAmount = input.files.length;                for (i = 0; i < filesAmount; i++) {                  var reader = new FileReader();                    reader.onload = function(event) {                      $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);                  }                    reader.readAsDataURL(input.files[i]);              }          }        };        $('#gallery-photo-add').on('change', function() {          imagesPreview(this, 'div.gallery');      });  });

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

Answer 2

Add the multiple attribute to your input element.

Javascript

function previewImages() {    var preview = document.querySelector('#preview');      if (this.files) {     [].forEach.call(this.files, readAndPreview);   }    function readAndPreview(file) {      // Make sure `file.name` matches our extensions criteria     if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {       return alert(file.name + " is not an image");     } // else...          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);     });          reader.readAsDataURL(file);        }  }  document.querySelector('#file-input').addEventListener("change", previewImages);

<input id="file-input" type="file" multiple> <div id="preview"></div>

jQuery adaptation:

function previewImages() {    var $preview = $('#preview').empty();   if (this.files) $.each(this.files, readAndPreview);    function readAndPreview(i, file) {          if (!/\.(jpe?g|png|gif)$/i.test(file.name)){       return alert(file.name +" is not an image");     } // else...          var reader = new FileReader();      $(reader).on("load", function() {       $preview.append($("<img/>", {src:this.result, height:100}));     });      reader.readAsDataURL(file);        }  }  $('#file-input').on("change", previewImages);

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

More info on MDN readAsDataURL
StackOverflow Preview Image, get file size, image height and width before upload