Wednesday, May 25, 2011

Image preiview in asp.net using javascript

        
<script language="javascript" type="text/javascript">
function PreiewImage() 
{
   var path = document.getElementById("<%=fuProductImage.ClientID%>"); // File Upload Control ID
   var extn = path.value.split(".");
   if (extn.length > 1)
  {
   if ((extn[1] == "jpg") || (extn[1] == "JPG") || (extn[1] == "png") || (extn[1] == "PNG") || (extn[1] == "gif") || (extn[1] == "GIF") || (extn[1] == "jpeg") || (extn[1] == "JPEG")) 
 {
      var img = document.getElementById("<%=imgProduct.ClientID%>"); //Image Control ID
    if (navigator.appName == "Microsoft Internet Explorer")
    {
      var _value = path.outerHTML.split("value=");
      var _value1 = _value[1].split("type");
      var s = _value1[0].replace(/"/g, '');
      var s = _value1[0].replace("\\", "/");
      s = "file:///" + extn[0] + '.' + extn[1];
     document.getElementById("<%=imgProduct.ClientID%>").src = s;
     return true;
 }
 else
 {
   img.src = decodeURIComponent(path.files[0].getAsDataURL());
   document.getElementById("<%=imgProduct.ClientID%>").value = img.src;
      return true;
   }
}
else 
{
      alert("Invalid Image Extn.");
    document.getElementById("<%=imgProduct.ClientID%>").value = "";
       return false;

        }
 }}

    </script>
 
         <table>
            <tr>
                <td>
                  <asp:Image ID="imgProduct" runat="server"  />
               </td>
               <td style="color: #C0C0C0">
                  <asp:FileUpload ID="fuProductImage" Width="190px" runat="server" onchange="PreiewImage(this);" />
                 </td>
            </tr>
        </table>

No comments:

Post a Comment