/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

3 votes328 views5 answers
Get span text jquery
Javascript jQuery
1 vote351 views2 answers
Jquery show hide based on data attribute
Javascript jQuery
1 vote308 views3 answers
Jquery array remove element
Javascript jQuery
0 vote368 views1 answer
JQuery('.product_foto_slide').slick({ infinite:true, arrows:false, dots:false, fade:true, slidesToShow:1, slidesToScroll:1, autoplay:false, autoplaySpeed:4600, asNavFor: '.product_preview_slide', focusOnSelect: true, responsive: [
Javascript jQuery
0 vote345 views1 answer
Save form data jquery
Javascript jQuery
11 votes313 views3 answers
Jquery delay
Javascript jQuery
0 vote384 views1 answer
Jqueryui droppable enable
Javascript jQuery
0 vote342 views1 answer
Jquery validate conditional
Javascript jQuery
0 vote358 views1 answer
Add set time out in jquery
Javascript jQuery
9 votes323 views6 answers
Change html using jquery
Javascript jQuery