Hello friends, In previous article we were learn Find first element in JSON using object property and Finding Distinct elements in an array in javascript
In this very short 5 minute article we will learn, Image preview before post image on server using asp.net fileupload control.
We will use here jQuery to preview image.
Most of cases we upload image using fileupload control of asp.net and after upload, we fetch image and preview it. Which is not seems good practice. we must display image before upload to server.
This is very common requirement every developer faces.
So i have decided to share this tip and trick with all of you, so that anyone can implement this technique in their application whenever required.
Create an web application with dot net framework.
Add new form with c# (code behind) with name ImagePreviewer.
Copy following Code for ImagePreviewer.aspx.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImagePreviewer.aspx.cs" Inherits="swclass.ImagePreviewer" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var j = (function ($) {
var PreviewImage = function (input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#<%=Img.ClientID%>').prop('src', e.target.result)
.width(300)
.height(250);
};
reader.readAsDataURL(input.files[0]);
}
}
return {
PreviewImage: function (f) {
return PreviewImage(f);
}
};
})($);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fup" runat="server" onchange="j.PreviewImage(this);"/>
<asp:Image ID="Img" Height="150px" Width="240px" runat="server" /><br />
</div>
</form>
</body>
</html>
Here we use on asp.net fileupload control to upload image and Image control for image preview. Here we use javascript onchange event with fileupload control, to call javascript PreviewImage method.
PreviewImage method have one argument which gets file object from fileupload control and preview images into asp.net Image control.
If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.
Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.