Introduction: In this article today I will
explain how we can preview the image before upload and save in asp.net
Description:
In the previous article I have explained Image preview after upload in asp.net, Validation for minimum and maximum price using Jquery, Show Gridview row detail in Tooltip on mousehover using Jquery in asp.net;Validate Listbox using Require filed validator control in asp.net,Create a dynamic Slider in asp.net, and Validate Dropdownlist using Require filed validator control in asp.net.
Add a
webform to project. After add the below given script and style to head section of
page:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
$("#FileUpload1").on("change", function
()
{
var files = !!this.files
? this.files : [];
if (!files.length || !window.FileReader) return;
if (/^image/.test( files[0].type)){
var reader = new
FileReader();
reader.readAsDataURL(files[0]);
reader.onloadend = function(){
$("#imagePreview").css("background-image", "url(" + this.result
+ ")");
}
}
});
});
</script>