How to preview an image before it is uploaded?
There are two ways. The most efficient way would be to use
URL.createObjectURL() on the File from your <input>. Pass this URL to img.src to the browser to load the provided image.
Also use FileReader.readAsDataURL() to parse the file from your <input>. It will create a string in memory containing a base 64 representation of the image.
Using an object URL viewing a large image is more efficient than compared to data URL.
In HTML have two preview elements:
In CSS we specify the following IE specific thing:
$('#blah') replace by
$('#preview') and add the
Using this code to display "No Preview Available" image, if it is not an image: