In previous article I explained jquery crop image in asp.net using jcrop plugin, disable right click on image using JQuery, jquery show html content in popup and many articles relating to jQuery, asp.net. Now I will explain how to use jQuery to preview image before upload in asp.net.
To implement this we need to write code as shown below in your aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery 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) {
$('#imgprvw').attr('src', e.target.result);
}
filerdr.readAsDataURL(input.files[0]);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="file" name="filUpload" id="filUpload" onchange="showimagepreview(this)" />
</div>
<img id="imgprvw" alt="uploaded image preview"/>
</form>
</body>
</html>
|
No comments :
Post a Comment