Preview of image before upload using java script and JQuery
In This article, we show the
image before upload that means we does not need to send the image in the
database then we will see it. Using this code we can see the image without
sending the image path in database. Here we use a file upload control tool of
asp.net and I have call on the change event ,I have called the ImgShow(this) function.
For more:
How to open pop up image on page load using jquery and css ,Embed Facebook page post on our web site / Blog , How to Change the image on mouse over using Jquery
Source Code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="imagepreview.aspx.cs" Inherits="imagepreview" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head runat="server">
<title>Image
Preview before upload using jquery/javacript</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
ImgShow(ImgShow) {
if
(navigator.appName != "Netscape") {
var
imgpreviewzone = document.getElementById("imgpreviewzone");
imgpreviewzone.style.display = "";
imgpreviewzone.style.width = "300px";
imgpreviewzone.style.height = "300px";
}
else
{
if
(ImgShow.files && ImgShow.files[0]) {
var
reader = new FileReader();
$('[id*=imgpreview]').css("display", "block");
reader.onload = function (e) {
$('#imgsrc')
.attr('src', e.target.result)
.width(300)
.height(300);
};
reader.readAsDataURL(ImgShow.files[0]);
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="UploadFile" runat="server" onchange="ImgShow(this)" />
<div id="imgpreviewzone">
</div>
<div id="imgpreview" style="display: none;">
<img id="imgsrc" />
</div>
</div>
</form>
</body>
</html>
Out-Put:-
Preview of image before upload using java script and JQuery
Reviewed by NEERAJ SRIVASTAVA
on
10:28:00 AM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
10:28:00 AM
Rating:
Awsm... Thank you very much sir..!
ReplyDeleteIt will not work in safari..
ReplyDeleteNo its working on above Safari 5.0
Delete