Here i will explain how to preview the image file before uploaded to server. When we upload any image file to server or to any file location.It is not possible to find out the write selection you have choose which u want to upload to server. By this example we are able to preview the selected image file before upload and choose the correct selection which u want to upload.
Take Asp.net file upload control to browse the selected image file which you want to upload to server.By using of jquery file we are able to preview the image before upload to the server.
Download Code
Html Code:
<html>
<head>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
#dvPreview
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
min-height: 400px;
min-width: 400px;
display: none;
}
.auto-style1 {
text-decoration: underline;
font-size: medium;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#fileupload").change(function () {
$("#dvPreview").html("");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test($(this).val().toLowerCase())) {
if ($.browser.msie &&
parseFloat(jQuery.browser.version) <= 9.0) {
$("#dvPreview").show();
$("#dvPreview")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();
}
else {
if (typeof (FileReader) != "undefined") {
$("#dvPreview").show();
$("#dvPreview").append("<img />");
var reader = new FileReader();
reader.onload = function (e) {
$("#dvPreview img").attr("src",
e.target.result);
}
reader.readAsDataURL($(this)[0].files[0]);
} else {
alert("This browser does not support FileReader.");
}
}
} else {
alert("Please upload a valid image file.");
}
});
});
</script>
</head>
<body>
<div>
Browse Picture to view thw live image<br />
<br />
<input id="fileupload" type="file" />
<b> </b>
<span class="auto-style1"><em>Preview</em></span>
<br />
<br />
<div id="dvPreview">
</div>
</div>
</body>
</html>
0 comments::
Post a Comment