Preview image before upload using FileUpload control in ASP.Net using jQuery.
How to
show an image preview when uploading images in ASP.NET using jQuery.
Source Code
<%@ Page Language="C#"
AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
Inherits="test1.WebForm1" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function previewFile() {
var preview = document.querySelector('#<%=Image1.ClientID %>');
var file = document.querySelector('#<%=FileUpload1.ClientID
%>').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUpload1" runat="server"
onchange="previewFile()" /><br />
<asp:Image ID="Image1" runat="server"
Height="225px" Width="225px" />
</div>
</form>
</body>
</html>
Output
Fig(1.1 )Now run your application and select an image from your device to upload.
Fig(1.2 )After selecting an image for your device you can see image on browser.
Thanks for visiting...