Show an image preview before upload

Question

In my HTML form I have input filed with type file for example       lt input type  file  multiple gt    Then I m selecting multiple files by clicking that input button  Now I want to show preview of selected images before submitting form     How to do that in HTML 5

User · Answer

Here I did with jQuery using FileReader API.

Html Markup:

<input id="fileUpload" type="file" multiple />
<div id="image-holder"></div>

jQuery:

Here in jQuery code,first I check for file extension. i.e valid image file to be processed, then will check whether the browser support FileReader API is yes then only processed else display respected message

$("#fileUpload").on('change', function () {

     //Get count of selected files
     var countFiles = $(this)[0].files.length;

     var imgPath = $(this)[0].value;
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
     var image_holder = $("#image-holder");
     image_holder.empty();

     if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
         if (typeof (FileReader) != "undefined") {

             //loop for each file selected for uploaded.
             for (var i = 0; i < countFiles; i++) {

                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("<img />", {
                         "src": e.target.result,
                             "class": "thumb-image"
                     }).appendTo(image_holder);
                 }

                 image_holder.show();
                 reader.readAsDataURL($(this)[0].files[i]);
             }

         } else {
             alert("This browser does not support FileReader.");
         }
     } else {
         alert("Pls select only images");
     }
 });

Detailed Article: How to Preview Image before upload it, jQuery, HTML5 FileReader() with Live Demo

User · Answer

HTML5 comes with File API spec  which allows you to create applications that let the user interact with files locally  That means you can load files and render them in the browser without actually having to upload the files  Part of the File API is the FileReader interface which lets web applications asynchronously read the contents of files    Here s a quick example that makes use of the FileReader class to read an image as DataURL and renders a thumbnail by setting the src attribute of an image tag to a data URL   The html code    lt input type  file  id  files    gt   lt img id  image    gt    The JavaScript code   document getElementById  files   onchange   function          var reader   new FileReader         reader onload   function  e               get loaded data and render thumbnail          document getElementById  image   src   e target result                 read the image file as a data URL      reader readAsDataURL this files 0         Here s a good article on using the File APIs in JavaScript   The code snippet in the HTML example below filters out images from the user s selection and renders selected files into multiple thumbnail previews    x000D   x000D  function handleFileSelect evt    x000D      var files   evt target files  x000D   x000D         Loop through the FileList and render image files as thumbnails  x000D      for  var i   0  f  f   files i   i      x000D   x000D           Only process image files  x000D        if   f type match  image        x000D          continue  x000D          x000D   x000D        var reader   new FileReader    x000D   x000D           Closure to capture the file information  x000D        reader onload    function theFile    x000D          return function e    x000D               Render thumbnail  x000D            var span   document createElement  span    x000D            span innerHTML    x000D              x000D                lt img style  height  75px  border  1px solid  000  margin  5px  src      x000D              e target result  x000D                 title     escape theFile name    x000D                  gt   x000D              join      x000D             x000D            document getElementById  list   insertBefore span  null   x000D             x000D           f   x000D   x000D           Read in the image file as a data URL  x000D        reader readAsDataURL f   x000D        x000D      x000D   x000D    document getElementById  files   addEventListener  change   handleFileSelect  false   x000D   lt input type  file  id  files  multiple   gt  x000D   lt output id  list  gt  lt  output gt  x000D   x000D   x000D

User · Answer

Without FileReader  we can use URL createObjectURL method to get the DOMString that represents the object   our image file    Don t forget to validate image extension   lt input type  quot file quot  id  quot files quot  multiple   gt   lt div class  quot image-preview quot  gt  lt  div gt   let file input   document querySelector   files    let image preview   document querySelector   image-preview     const handle file preview    e    gt      let files   e target files    let length   files length     for let i   0  i  lt  length  i            let image   document createElement  img             use the DOMstring for source       image src   window URL createObjectURL files i          image preview appendChild image          file input addEventListener  change   handle file preview

User · Answer

x000D   x000D  function handleFileSelect evt    x000D      var files   evt target files  x000D   x000D         Loop through the FileList and render image files as thumbnails  x000D      for  var i   0  f  f   files i   i      x000D   x000D           Only process image files  x000D        if   f type match  image        x000D          continue  x000D          x000D   x000D        var reader   new FileReader    x000D   x000D           Closure to capture the file information  x000D        reader onload    function theFile    x000D          return function e    x000D               Render thumbnail  x000D            var span   document createElement  span    x000D            span innerHTML    x000D              x000D                lt img style  height  75px  border  1px solid  000  margin  5px  src      x000D              e target result  x000D                 title     escape theFile name    x000D                  gt   x000D              join      x000D             x000D            document getElementById  list   insertBefore span  null   x000D             x000D           f   x000D   x000D           Read in the image file as a data URL  x000D        reader readAsDataURL f   x000D        x000D      x000D   x000D    document getElementById  files   addEventListener  change   handleFileSelect  false   x000D   lt input type  file  id  files  multiple   gt  x000D   lt output id  list  gt  lt  output gt  x000D   x000D   x000D

User · Answer

For background images  make sure to use url    node backgroundImage    url     e target result

[html] Show an image preview before upload

Examples related to html

Examples related to image-processing

Examples related to upload