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

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.