If you want to upload an image through a file upload control in ASP.NET C# and want to preview of image with in upload time, write simple code to get out of here.
You can use given below function for it:
  1. <script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
  2. <script type="text/javascript">
  3. function ShowpImage(input) {
  4. if (input.files && input.files[0]) {
  5. var reader = new FileReader();
  6. reader.onload = function (e) {
  7. $('#ImgShow').attr('src', e.target.result);
  8. }
  9. reader.readAsDataURL(input.files[0]);
  10. }
  11. }
  12. </script>
Now Full Code,
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <title>
  6. Show image preview on File upload Control
  7. </title>
  8. <script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
  9. <script type="text/javascript">
  10. function ShowpImage(input) {
  11. if (input.files && input.files[0]) {
  12. var reader = new FileReader();
  13. reader.onload = function (e) {
  14. $('#ImgShow').attr('src', e.target.result);
  15. }
  16. reader.readAsDataURL(input.files[0]);
  17. }
  18. }
  19. </script>
  20. </head>
  21. <body>
  22. <form id="form1" runat="server">
  23. <div>
  24. <fieldset style="width: 250px;">
  25. <legend>Show image preview before image upload</legend>
  26. <div align="center">
  27. <asp:Image ID="ImgShow" Height="150px" Width="150px" runat="server" /><br />
  28. <asp:FileUpload ID="flupImage" runat="server" onchange="ShowpImage(this);" />
  29. </div>
  30. </fieldset>
  31. </div>
  32. </form>
  33. </body>
  34. </html>
Output 1

Now Click on Browse Button and select a image and click on open button.

Output 2

Blog source-dotnetdarpan.blogspot.in