/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

16 votes203 views4 answers
Jquery html select selected get text
Javascript jQuery
0 vote236 views1 answer
Svg jquery onclick color change in wordpress
Javascript jQuery
111 votes285 views6 answers
Document ready jquery
Javascript jQuery
85 votes226 views6 answers
How to check checkbox using jquery
Javascript jQuery
62 votes202 views6 answers
Document on click jquery
Javascript jQuery
1 vote266 views1 answer
Export table data to excel in jquery
Javascript jQuery
0 vote207 views1 answer
Location on select dropdown redirect jquery
Javascript jQuery
0 vote215 views2 answers
How to get url parameter using jquery or plain javascript
Javascript jQuery
46 votes192 views2 answers
Google hosted jquery
Javascript jQuery
5 votes210 views3 answers
Jquery disable all input form
Javascript jQuery