multiple image preview

Abdulfatah Ayodele Shokunbi answered on October 9, 2022 Popularity 6/10 Helpfulness 2/10

answer multiple image preview

multiple image preview

Comment

window.onload = function() {
  //Check File API support
  if (window.File && window.FileList && window.FileReader) {
    var filesInput = document.getElementById("files");
    filesInput.addEventListener("change", function(event) {
      var files = event.target.files; //FileList object
      var output = document.getElementById("result");
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        //Only pics
        if (!file.type.match('image'))
          continue;
        var picReader = new FileReader();
        picReader.addEventListener("load", function(event) {
          var picFile = event.target;
          var div = document.createElement("div");
          div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
            "title='" + picFile.name + "'/>";
          output.insertBefore(div, null);
        });
        //Read the image
        picReader.readAsDataURL(file);
      }
    });
  } else {
    console.log("Your browser does not support File API");
  }
}

Popularity 6/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: image javascript preview

Link to this answer
Share Copy Link

Contributed on Oct 09 2022

Abdulfatah Ayodele Shokunbi

0 Answers Avg Quality 2/10

multiple image preview

Contents

More Related Answers

multiple image preview

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.