Preview an image before it is uploaded

Question

I want to be able to preview a file (image) before it is uploaded. The preview action should be executed all in the browser without using Ajax to upload the image.

How can I do this?

Answer 1

imgInp.onchange = evt => {   const [file] = imgInp.files   if (file) {     blah.src = URL.createObjectURL(file)   } }

<form runat="server">   <input accept="image/*" type='file' id="imgInp" />   <img id="blah" src="#" alt="your image" /> </form>

Answer 2

There are a couple ways you can do this. The most efficient way would be to use URL.createObjectURL() on the File from your <input>. Pass this URL to img.src to tell the browser to load the provided image.

Here's an example:

<input type="file" accept="image/*" onchange="loadFile(event)">  <img id="output"/>  <script>    var loadFile = function(event) {      var output = document.getElementById('output');      output.src = URL.createObjectURL(event.target.files[0]);      output.onload = function() {        URL.revokeObjectURL(output.src) // free memory      }    };  </script>

You can also use FileReader.readAsDataURL() to parse the file from your <input>. This will create a string in memory containing a base64 representation of the image.

<input type="file" accept="image/*" onchange="loadFile(event)">  <img id="output"/>  <script>    var loadFile = function(event) {      var reader = new FileReader();      reader.onload = function(){        var output = document.getElementById('output');        output.src = reader.result;      };      reader.readAsDataURL(event.target.files[0]);    };  </script>