Category >
ASP.NET
|| Published on :
Wednesday, February 10, 2016 || Views:
8672
||
display image on image selection using fileupload control in JQuery display image on image selection
Introduction
Here Pawan Kumar will explain how to display image on image selection using fileupload control in JQuery.
Description
In previous post I have explained
How to clear the file upload control value using jQuery / JavaScript,
Export GridView selected rows to Excel or word in ASP.NET using CSharp,
How to allow numbers, backspace, delete, left and right arrow and Tab Keys to the TextBox using Javascript or JQuery in ASP.NET,
Upload And Read Excel File into DataSet in Asp.Net using C#,
How to find third highest salary in sql server.,
How to prevent input field from special character, and many more articles.
Now I will explain How to How to display image on image selection using fileupload control in JQuery.
So follow the steps to learn How to display image on image selection using fileupload control in JQuery.
Step 1: Create a new website using Visual Studio 2010.
Step 2: Add a new webform and name it default.aspx.
Step 3: Add the following code to the aspx webpage
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
function ShowPreview(input) {
if (input.files && input.files[0]) {
var ImageDir = new FileReader();
ImageDir.onload = function (e) {
$('#impPrev').attr('src', e.target.result);
}
ImageDir.readAsDataURL(input.files[0]);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table cellpadding="10" cellspacing="4" width="70%" align="center" style="border: Solid 10px Skyblue; font-weight: bold; font-size: 16pt; background-color: Skyblue; color: Blue;">
<tr>
<td align="center">Upload Images
</td>
</tr>
<tr>
<td>Select Your File To Upload:
<input type="file" name="ImageUpload" id="ImageUpload" onchange="ShowPreview(this)" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" />
</td>
</tr>
<tr>
<td>
<asp:Image ID="impPrev" runat="server" Height="200px" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Output:-
Conclusion:
So, In this tutorial we have learned, How to display image on image selection using fileupload control in JQuery.
Download Source Codes