Introduction :
Here i will code you how to Preview the Image before uploading, from the client side script. Compatible to all the major browsers. Here on selecting the file from the fileupload control, i will display the image in the div tag,can display in image control too. Here i have written two types of code one for all the browsers and other for FireFox.
ASPX Code :
<!DOCTYPE html >
<html>
<head id="Head1" runat="server">
<title>Fourthbottle.com</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript"
type="text/javascript">
function ImagePreview(ImagePreview) {
if (navigator.appName != "Netscape")
{
var previewzone =
document.getElementById("previewzone");
previewzone.style.display = "";
previewzone.style.width = "250px";
previewzone.style.height = "250px";
}
else {
if (ImagePreview.files &&
ImagePreview.files[0]) {
var reader = new
FileReader();
$('[id*=ForFF]').css("display", "block");
reader.onload = function (e) {
$('#FFImg')
.attr('src', e.target.result)
.width(250)
.height(250);
};
reader.readAsDataURL(ImagePreview.files[0]);
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="UploadFile"
runat="server"
onchange="ImagePreview(this)"
/>
<div id="previewzone">
</div>
<div id="ForFF" style="display: none;">
<img id="FFImg" alt="your image"
/>
</div>
</div>
</form>
</body>
</html>