Image Show on change of fileupload

  1. <head runat="server">  
  2.     <title>Preview Image While Upload</title>  
  3.   
  4.     <script src="jquery-1.8.2.js" type="text/javascript"></script>  
  5.   
  6.     <script type="text/javascript">  
  7.         function ShowPreview(input) {  
  8.             if (input.files && input.files[0]) {  
  9.                 var ImageDir = new FileReader();  
  10.                 ImageDir.onload = function(e) {  
  11.                     $('#impPrev').attr('src', e.target.result);  
  12.                 }  
  13.                 ImageDir.readAsDataURL(input.files[0]);  
  14.             }  
  15.         }  
  16.     </script>  
  17.   
  18. </head>  
  19. <body>  
  20.     <form id="form1" runat="server">  
  21.     <table cellpadding="10" cellspacing="4" width="70%" align="center" style="border: Solid 10px Green;  
  22.         font-weight: bold; font-size: 16pt; background-color: Skyblue; color: Blue;">  
  23.         <tr>  
  24.             <td align="center">  
  25.                 Upload Images  
  26.             </td>  
  27.         </tr>  
  28.         <tr>  
  29.             <td>  
  30.                 Select Your File To Upload #:  
  31.                 <input type="file" name="ImageUpload" id="ImageUpload" onchange="ShowPreview(this)" />  
  32.                 <asp:Button ID="btnUpload" runat="server" Text="Upload" />  
  33.             </td>  
  34.         </tr>  
  35.         <tr>  
  36.             <td>  
  37.                 <asp:Image ID="impPrev" runat="server" Height="200px" />  
  38.             </td>  
  39.         </tr>  
  40.     </table>  
  41.     </form>  
  42. </body>  
  43. </html> 

Comments

Popular posts from this blog

Grideview on row command

Encription Manager In Asp.net