In this
article I will explain how to show the
preview of the image before uploading the image through fileupload control in asp.net.
Sometime it is required to preview the image that we are going to upload before
actually uploading the image. This
is very common requirement that every developer faces.
This
functionality can be achieved by using jQuery easily. jQuery is fast and very
useful to show preview.
Let's
create an asp.net web page to check this feature in action.
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: 300px;">
<legend><strong>Show
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);" />
</div>
</fieldset>
</div>
</form>
</body>
</html>
In the
above example we are calling the jQuery
function " ShowpImagePreview"
on the "onchange event" of fileuploadcontrol so that whenever user select any image through this control, he can view the selected image in the asp.net Image control before actually uploading that image.
0 comments:
Post a Comment