Sometime
while working on asp.net
project it is required to preview the image that we are going to upload. Using jquery we can preview Image before
uploading the image. It looks good to check the preview while uploading the
image. So it is suggested to every developer to provide this functionality of
preview before uploading the image.
In
this article I will explain how to show the preview of the image before
uploading the image through fileupload control in asp.net.
Jquery Script to Preview Image:
<script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function ShowpImagePreview(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#ImgPrv').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
Full Source Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Show
image preview before image upload</title>
<script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function ShowpImagePreview(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#ImgPrv').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width: 270px;">
<legend><strong>Image
preview before image upload</strong></legend>
<div align="center">
<asp:Image ID="ImgPrv" Height="150px" Width="240px" runat="server" /><br />
<asp:FileUpload ID="flupImage" runat="server" onchange="ShowpImagePreview(this);" />
<br /><br />
</div>
</fieldset>
</div>
</form>
</body>
</html>
In the
above example, we are calling the jQuery function " ShowpImagePreview" on the
"onchange event" of fileupload control so when user select image,
he/She can view the selected image in the asp.net Image control before actually
uploading that image(i.e. Preview of the Image).
0 comments:
Post a Comment