FileUpload with Asyncfileupload and JQuery without refreshing page.
.aspx
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="cc1"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function
uploadStarted() {
$get("imgDisplay").style.display
= "none";
}
function
uploadComplete(sender, args) {
var
imgDisplay = $get("imgDisplay");
imgDisplay.src = "images/loader.gif";
imgDisplay.style.cssText = "";
var
img = new Image();
img.onload = function() {
};
img.src = "<%=ResolveUrl(UploadFolderPath)
%>" + args.get_fileName(); ;
//alert(img.src);
$('#UploadedImage').append('<img src=' + img.src + ' style="height:100px;width:100px;">');
}
</script>
<style type="text/css" >
.FileUploadClass
{
width:
33px;
height:
22px;
background:
url('browse-icon.jpg') 0
0 no-repeat;
display:
block;
overflow:
hidden;
cursor:
pointer;
}
.FileUploadClass
input[type=file]
{
cursor:
pointer;
position:
relative;
height:
100%;
width:
auto;
opacity:
0;
-moz-opacity:
0;
filter:
progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:asyncfileupload cssclass="FileUploadClass" onclientuploadcomplete="uploadComplete"
runat="server" id="AsyncFileUpload1" onuploadedcomplete="FileUploadComplete"
width="20px" height="26px" style="cursor: pointer;" onclientuploadstarted="uploadStarted"
/>
<br />
<img id="imgDisplay" alt="" src="" style="cursor: pointer; display: none" />
<div id="UploadedImage">
</div>
</form>
</body>
</html>
.cs
Page
protected string
UploadFolderPath = "~/";
protected void
FileUploadComplete(object sender, EventArgs e)
{
string
filename = System.IO.Path.GetFileName(AsyncFileUpload1.FileName);
AsyncFileUpload1.SaveAs(Server.MapPath(this.UploadFolderPath) + filename);
}
Click Download For Sample Code.
when u browse the page refresh, then how do you titled "FileUpload with Asyncfileupload and JQuery without refreshing page"
ReplyDeleteAt the time of upload completed, you can see there is a event call "FileUploadComplete" it is storing uploaded file into folder.
DeleteI have attached Sample code.
For more information please download Sample code for the same.
Thanks for your interest Vinod