If you want to upload an image through a file upload control
in ASP.NET C# and want to preview of image with in upload time, write simple
code to get out of here.
You can use given below function for it
<script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function ShowpImage(input) {
if (input.files && input.files[0]) {
var reader = new
FileReader();
reader.onload = function (e) {
$('#ImgShow').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
Now Full Code,
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
%>
<!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>
Show image preview on File
upload Control</title>
<script src="//code.jquery.com/jquery-1.10.2.min.js"
type="text/javascript"></script>
<script type="text/javascript">
function
ShowpImage(input) {
if
(input.files && input.files[0]) {
var
reader = new FileReader();
reader.onload = function (e) {
$('#ImgShow').attr('src',
e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width: 250px;">
<legend>Show
image preview before image upload</legend>
<div align="center">
<asp:Image ID="ImgShow" Height="150px" Width="150px" runat="server" /><br />
<asp:FileUpload ID="flupImage" runat="server" onchange="ShowpImage(this);" />
</div>
</fieldset>
</div>
</form>
</body>
</html>
|
Output 1
Now Click on Browse Button and select a image and click on open button.
Output 2
Previewing Image in ASP.NET Image Control
ReplyDeleteIf you want to upload an image through a file upload control in ASP.NET C# and want to preview of image with in upload time, write simple code to get out of here.
nice code
ReplyDeletegive some code for fixed gridview header and footer
ReplyDeleteit's so informative blog post. thanks for sharing. keep it up.
ReplyDelete