Want to become a Vibe Coder? Join Vibe Coding Training here
x
C# Corner
Tech
News
Videos
Forums
Jobs
Books
Events
More
Interviews
Live
Learn
Training
Career
Members
Blogs
Challenges
Certification
Contribute
Article
Blog
Video
Ebook
Interview Question
Collapse
Feed
Dashboard
Wallet
Learn
Achievements
Network
Refer
Rewards
SharpGPT
Premium
Contribute
Article
Blog
Video
Ebook
Interview Question
Register
Login
File Upload control using Ajax and javascript in asp.net
WhatsApp
Dhaval Patel
6y
54.7
k
0
2
25
Blog
AjaxControlToolkit.rar
How to Make File upload using Ajax control in asp.net
Javascript file
<
script
type
=
"text/javascript"
language
=
"javascript"
>
function uploadError(sender,args){
document.getElementById('lblStatus')
.innerText
=
args
.get_fileName(),
"
<
span
style
=
'color:red;'
>
" + args.get_errorMessage() + "
</
span
>
";
addToClientTable(args.get_fileName(), "
<
span
style
=
'color:red;'
>
" + args.get_errorMessage() + "
</
span
>
");
}
function StartUpload(sender,args){
document.getElementById('lblStatus')
.innerText
=
'Uploading Started.'
;
}
function UploadComplete(sender,args){
var
filename
=
args
.get_fileName();
var
contentType
=
args
.get_contentType();
var
text
=
"Size of "
+ filename + " is " + args.get_length() + " bytes";
if (contentType.length
>
0)
{
text += " and content type is '" + contentType + "'.";
}
document.getElementById('lblfilename')
.innerText
=
filename
;
document.getElementById('lblStatus')
.innerText
=
text
;
addToClientTable(args.get_fileName(), text);
}
function fillCell(row, cellNumber, text) {
var
cell
=
row
.insertCell(cellNumber);
cell.innerHTML
=
text
;
cell
cell.style.borderBottom
= cell
.style.borderRight
=
"solid 1px #aaaaff"
;
}
function addToClientTable(name, text) {
var
table
=
document
.getElementById("
<
%= clientSide.ClientID %
>
");
var
row
=
table
.insertRow(0);
fillCell(row, 0, name);
fillCell(row, 1, text);
}
</
script
>
Design page
<
asp:ScriptManager
ID
=
"scman"
runat
=
"server"
>
</
asp:ScriptManager
>
<
asp:UpdatePanel
ID
=
"update1"
runat
=
"server"
>
<
ContentTemplate
>
<
AjaxToolkit:AsyncFileUpload
ID
=
"AsyncFileUpload1"
Width
=
"400px"
runat
=
"server"
OnClientUploadError
=
"uploadError"
OnClientUploadStarted
=
"StartUpload"
OnClientUploadComplete
=
"UploadComplete"
CompleteBackColor
=
"Lime"
UploaderStyle
=
"Modern"
ErrorBackColor
=
"Red"
ThrobberID
=
"Throbber"
OnUploadedComplete
=
"AsyncFileUpload1_UploadedComplete"
UploadingBackColor
=
"#66CCFF"
/>
<
br
/>
<
asp:Label
ID
=
"Throbber"
runat
=
"server"
Style
=
"display: none"
Font-Bold
=
"true"
>
<
img
src
=
"images/indicator-new.gif"
align
=
"absmiddle"
alt
=
"loading"
/>
</
asp:Label
>
<
asp:Label
ID
=
"lblfilename"
runat
=
"server"
Style
=
"font-family: Arial; color:Green; font-size: small;"
>
</
asp:Label
>
<
br
/>
<
asp:Label
ID
=
"lblStatus"
runat
=
"server"
Style
=
"font-family: Arial; font-size: small;"
>
</
asp:Label
>
<
table
style
=
"border-collapse: collapse; border-left: solid 1px #aaaaff; border-top: solid 1px #aaaaff;"
runat
=
"server"
cellpadding
=
"3"
id
=
"clientSide"
/>
</
ContentTemplate
>
<
Triggers
>
<
asp:AsyncPostBackTrigger
ControlID
=
"AsyncFileUpload1"
EventName
=
"UploadedComplete"
/>
</
Triggers
>
</
asp:UpdatePanel
>
And Code behind page for file upload
protected
void
AsyncFileUpload1_UploadedComplete(
object
sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
System.Threading.Thread.Sleep(1000);
if
(AsyncFileUpload1.HasFile)
{
string
strPath = MapPath(
"~/Uploads/"
) + System.IO.Path.GetFileName(e.filename);
AsyncFileUpload1.SaveAs(strPath);
}
}
File Upload control using Ajax and javascript in asp.net
People also reading
Membership not found