Upload and preview image in client side without posting back

Question

I need to upload an image and then preview it without posting back as i need to have a file upload control(even HTMLinputfile or ASPfileupload) then the user will browse to select image after selecting (browsing) there will a button(HTMLInputButton) that will save the uploaded image and preview it.

I have the following code :

<div>
    <input id="UploadInput" type="file" value="Upload" />
    <br />
    <input id="PreviewBtnInput" type="button" value="Preview" onclick="ShowPreview()" /> 
    <br />
    <img id="ImgUploaded"  />
</div>

So how can i do this task ?

Thanks in advance for any reply but please if any one has a link for article that talk about this issue please i need a clear code not article details.

Answer 1

In order to preview images before uploading them to the server you'll need to use a Flash-, Silverlight-, ActiveX-, or Java Applet-based file uploader. The file input itself doesn't allow you to interact with the actual file and display it in your web page. Using it alone would require you to upload the file to the server, where you can then refer to it using a URL (either directly as a file or via an HTTPHandler). If you must have preview before post, you should look for an existing product that will handle this on the client side for you. A quick google for flash-based file upload, brought up this, this, and this in the results.

Answer 2

You can use the project mentioned below to preview the image before uploading. Working sample is also attached.

http://www.dotnetspider.com/resources/40858-Preview-Image-before-uploading-using.aspx

This uses AjaxControlToolKit's AsyncFileUploadControl and HTTPHandler to upload the image.