Tuesday, January 28, 2014

Show Image Preview Before Upload in Asp.Net

12 comments
Sometime in web application you want to show the preview of the image before uploading on the server. In this example I will explain how to show the preview of the image after user select the file using file upload control in asp.net.
To show the  image preview take one img tag and on the onchange event of File Upload control bind the src attribute of the img tag to the uploaded file.

Code to Show Image Preview Before Upload Using File Upload Control in asp.net:

Html Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
 function showpreview(input) {
 
if (input.files && input.files[0]) {

var reader = new FileReader();
reader.onload = function (e) {
 $('#imgpreview').attr('src', e.target.result);
 }
 reader.readAsDataURL(input.files[0]);
}

}

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="imgpreview" height="200" width="200" src="" style="border-width:0px;" />
<asp:FileUpload ID="fuimage" runat="server" onchange="showpreview(this);" />
</div>
</form>
</body>
</html>


Download Sample Code:





Sample Preview of Image Preview Before Upload:

Show preview before upload of image in asp.net













12 comments:

  1. It works perfectly

    ReplyDelete
  2. It working...So Helpful.....Thank you so much

    ReplyDelete
  3. good .... very nice ...

    ReplyDelete
  4. This code work only master page why not work in default page that include master page

    ReplyDelete
  5. Working Perfect.... & simple to implement.. Thanks................

    ReplyDelete
  6. Thanks very nice ...

    ReplyDelete
  7. Thanks on your marvelous posting! It is very useful and good.Come on. I want to introduce a dell recovery files, I try it and I feel it is so good to us beginners, have you ever heard it?

    ReplyDelete
  8. Very nice article. Thanks a lot

    ReplyDelete