/Javascript/jQuery/How to show multiple image preview in jquery

How to show multiple image preview in jquery

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

Source: stackoverflow.com

How to show multiple image preview in jquery

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

Source: stackoverflow.com

Similar codes

0 vote338 views1 answer
Set attribute checked jquery
Javascript jQuery
63 votes324 views6 answers
Addclass jquery
Javascript jQuery
26 votes317 views6 answers
Scroll to div jquery
Javascript jQuery
12 votes327 views2 answers
Download jquery 3.1.1
Javascript jQuery
2 votes308 views3 answers
Jquery get 2nd child
Javascript jQuery
7 votes374 views4 answers
Jquery id starts with
Javascript jQuery
0 vote354 views1 answer
Jquery element to dom element
Javascript jQuery
0 vote334 views1 answer
How to change the color of error message in jquery validation
Javascript jQuery
6 votes344 views3 answers
Jquery remove and add class
Javascript jQuery
1 vote357 views1 answer
Sort divs alphabetically jquery
Javascript jQuery