Show Image Preview using Java Script and File Upload Control in Asp.net

Category: ASP.NETJAVA SCRIPT Comments: No comments

Sometimes we need that by selecting the image by Fileupload Control and display the image in image control
Follow the Below Code

Step 1:

<script type=”text/javascript”>

function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function (e) {

var str21 = ‘<img style=”width:100px; height:125px;padding: 2px; border: 1px solid Silver” src=”‘ + e.target.result + ‘” >’;
$(“#DivNewPreview”).html(str21);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>

Step 2: .aspx Page

<asp:FileUpload ID=”FileUpload1″ runat=”server” onchange=”readURL(this);” />

<div id=”DivNewPreview”>

</div>

Leave a Reply

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.