How to preview image in asp net with Jquery
Note : we will discuss
how to
use preview image concept with jquery in Asp.net in this topic .First we
will take a Website with Default2.aspx page and download jquery-1.10.2.min.js from www.Jquery.com follow as below code
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default2.aspx.cs"
Inherits="Default2"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.10.2.min.js"
type="text/javascript"></script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new
FileReader();
reader.onload
= function (e) {
$('#Image1').attr('src',
e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(function () {
$("#filephoto").change(function () {
var $this = $(this);
readURL(this);
//alert("This height " + $this.height() + "this
is width" + $this.width());
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="100%"
>
<tr>
<td>
Name</td>
<td style="width:30px" >
<asp:TextBox ID="TextBox1"
runat="server"></asp:TextBox>
</td>
<td rowspan="3">
<asp:Image ID="Image1" runat="server"
Height="72px"
Width="108px"
/>
</td>
</tr>
<tr>
<td>
User
Image</td>
<td>
<asp:FileUpload ID="filephoto"
runat="server"
/>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnsave"
runat="server"
onclick="btnsave_Click"
Text="Save"
/>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Nice one Sir
ReplyDelete