In this article I will
explain how
to show preview Image before Upload using Fileupload in Asp.net.
In this scenario I have taken a Fileupload control and
image control. End users upload the image using fileupload control on the time
we show the preview of the image.
Related Link:
How to Crop Images Dynamically in
Asp.net using Jcrop jQuery Plugin and Upload Crop images to Folder
Below JavaScript code for preview of the image.
<script type="text/javascript">
function
ShowImagePreview(input) {
if (input.files &&
input.files[0]) {
var filerdr = new FileReader();
filerdr.onload = function (e) {
$('#imgShowprvw').attr('src',
e.target.result);
}
filerdr.readAsDataURL(input.files[0]);
}
}
</script>
Below is the design
code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show Preview Image before upload</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
function
ShowImagePreview(input) {
if (input.files &&
input.files[0]) {
var filerdr = new FileReader();
filerdr.onload = function (e) {
$('#imgShowprvw').attr('src',
e.target.result);
}
filerdr.readAsDataURL(input.files[0]);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table align="Center">
<tr>
<td align="Center">
<b><u style="font-size: x-large; color:
maroon;">Show Priview of the image</u></b>
</td>
</tr>
<tr>
<td>
Select a image : <asp:FileUpload runat="server" ID="fuShowImage" onchange="ShowImagePreview(this)" />
</td>
</tr>
<tr>
<td>
Show uploaded image preview: <img id="imgShowprvw" />
</td>
</tr>
</table>
</form>
</body>
</html>
Output:
Thanks. This was the only solution that worked for me.
ReplyDelete