/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 vote229 views1 answer
Jquery plugin for searchable dropdown
Javascript jQuery
0 vote247 views2 answers
How to pass custom regex in jquery validation
Javascript jQuery
78 votes215 views3 answers
Jquery each get index
Javascript jQuery
11 votes215 views2 answers
Jquery prop checked
Javascript jQuery
0 vote222 views1 answer
Jquery check input is disable
Javascript jQuery
0 vote203 views1 answer
Jquery datatable server side pagination asp.net core
Javascript jQuery
1 vote217 views1 answer
How to remove id in jquery
Javascript jQuery
0 vote258 views1 answer
Jquery get current row value
Javascript jQuery
2 votes241 views1 answer
Can we give a url to img with jquery
Javascript jQuery
0 vote238 views2 answers
Jquery body class add
Javascript jQuery