javascript - Preview Image before uploading file

Question

I have got one problem by uploading file. I created an aspx file in asp.net then I added a fileupload control and image control. I want to show preview image in image control before uploading. I created a following script.

<img id="Image" src="" alt="" />
            <br />
<asp:FileUpload ID="Upload" runat="server" onchange="document.getElementById('Image').src = 'file:///' + this.value;alert('file:///' + this.value);" />

It is not work in every browser. How could I do that?

Answer 1

You can't, for security reasons the full path of the file isn't made available to your script (if it were, you'd have to perform transformations on it to use it as a URL).

On some modern browsers, you could use the new File API to actually read the image data and show it on the page. I've previously written another answer here on SO shows how to do that (in that case, so we can find the image dimensions).

But other than that, you have to assume the user has a means of seeing what image they've chosen, aside from your web page.