Introduction:
Here I will explain how to use Ajax AsyncFileUpload control to upload files to folder and show progress bar during upload files to server using asp.net
Description:
Previously I explained many articles relating to Ajax. Now I will explain how to use ajax AsyncFileUpload control to upload files to folder in asp.net. Before proceed to implement sample have you install ajaxcontroltoolkit in visual studio or not if not install it otherwise if you already done then follow the below steps to implement Ajax AsyncFileUpload control example in asp.net.
Here I will explain how to use Ajax AsyncFileUpload control to upload files to folder and show progress bar during upload files to server using asp.net
Description:
Previously I explained many articles relating to Ajax. Now I will explain how to use ajax AsyncFileUpload control to upload files to folder in asp.net. Before proceed to implement sample have you install ajaxcontroltoolkit in visual studio or not if not install it otherwise if you already done then follow the below steps to implement Ajax AsyncFileUpload control example in asp.net.
First create one new
website after that right click on it add new folder and give name as ‘Files’
after that add AjaxControlToolkit
reference to your application and add following line in your aspx page
<%@ Register Namespace="AjaxControlToolkit"
Assembly="AjaxControlToolkit"
tagPrefix="ajax"
%>
Once add above
references design your aspx page will be likes this
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="ajax"
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"
runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
// This function will execute after file
uploaded successfully
function uploadComplete() {
document.getElementById('<%=lblMsg.ClientID
%>').innerHTML = "File Uploaded
Successfully";
}
// This function will execute if file upload
fails
function uploadError() {
document.getElementById('<%=lblMsg.ClientID
%>').innerHTML = "File upload
Failed.";
}
</script>
</head>
<body>
<form id="form1"
runat="server">
<ajax:ToolkitScriptManager ID="scriptManager1"
runat="server"/>
<div>
<ajax:AsyncFileUpload ID="fileUpload1"
OnClientUploadComplete="uploadComplete"
OnClientUploadError="uploadError"
CompleteBackColor="White" Width="350px" runat="server" UploaderStyle="Modern" UploadingBackColor="#CCFFFF"
ThrobberID="imgLoad" OnUploadedComplete="fileUploadComplete" /><br />
<asp:Image ID="imgLoad"
runat="server"
ImageUrl="loading.gif"
/>
<br />
<asp:Label ID="lblMsg"
runat="server"
Text=""></asp:Label>
</div>
</form>
</body>
</html>
|
If
you observe above code I define lot of properties to ajax:AsyncFileUpload now
I will explain all the properties of Ajax fileupload control
OnClientUploadComplete – This property is
used to execute the client side JavaScript function after file successfully
uploaded.
OnClientUploadError – This property is
used to execute the client side JavaScript function if file uploading failed.
OnClientUploadStarted – This property is
used to execute the client side JavaScript function whenver file uploading start.
CompleteBackColor – This property is
used to set fileupload control background after file upload complete its
default value ‘Lime’.
ErrorBackColor – This property is
used to set fileupload control background if file upload failed its default value
‘Red’.
UploadingBackColor – This property is the id of the control which is seen
during upload file.
UploaderStyle
–
This property is used to set fileupload control appearance style either Modern or Traditional. By default its
value "Traditional".
ThrobberID – ID of control that
is shown while the file is uploading.
Width
–
This property is used to set width of the control. By default its value ‘355px’
Now
in code behind add following namespaces
C# Code
using System;
using System.Web.UI;
using AjaxControlToolkit;
|
After
completion of adding namespaces write following code in code behind
protected void fileUploadComplete(object sender, AsyncFileUploadEventArgs
e)
{
string filename = System.IO.Path.GetFileName(fileUpload1.FileName);
fileUpload1.SaveAs(Server.MapPath("Files/")
+ filename);
}
|
VB Code
Imports System.Web.UI
Imports AjaxControlToolkit
Partial Class Default
Inherits System.Web.UI.Page
Protected Sub fileUploadComplete(ByVal sender As Object, ByVal e As AsyncFileUploadEventArgs)
Dim filename As String =
System.IO.Path.GetFileName(fileUpload1.FileName)
fileUpload1.SaveAs(Server.MapPath("Files/")
& filename)
End Sub
End Class
|
Demo
 |
Download
sample code attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
38 comments :
Sir in above example everytime it is showing file uploaded successfully but i want to know when uploaderror function will be called displaying upload error.
Thanks in advance.
@Suresh Gupta....
Every time that is showing file uploaded successfully mean it's uploading files to folder without having any error. In case some errors occur during upload files it will execute uploadError function....
sir I mean to ask that is there any restriction on size of data that can be uploaded ??and if more size of data is uploaded then will it call uploaderror function?
@Suresh Gupta...
Yeah size restriction is there if we upload large size of files then that will call uploaderror function
Sir, i want to display progress bar like 1%, 2%, .....100% upload completed bar, instead of an image.
Sorry.In my last comment,I mistype as "It is show" behalf of "It is not show".Then i reinstall the AJAX.Now in the function the error "'innerhtml' object is null or undefined" is displayed.I'm using IE 9.What i have to do ?
Sir.I am having problem with the above code and it is giving me the following error-
Could not load type 'System.Web.UI.ScriptReferenceBase' from assembly 'System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35'.
Sir,I will be highly obliged if you please solve the problem.
Sir, can i see the image on my page before upload and ask for confirmation for saving
hi sir ur code is very useful and simple to understand bt when i am debugging the code it is showing no source code available plz gve reply
protected void fileUploadComplete(object sender,AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
string filename = System.IO.Path.GetFileName(fileUpload1.FileName);
string ext = System.IO.Path.GetExtension(this.fileUpload1.PostedFile.FileName).ToUpper() ;
if (ext == ".JPG" || ext == ".JPEG" || ext == ".GIF" || ext == ".PNG")
{
int fileSize = fileUpload1.PostedFile.ContentLength;
if (fileSize <= 4096)
fileUpload1.SaveAs(Server.MapPath("~/Files") + filename);
else
DisplayClientError("file size should be less than 4kb");
}
else
DisplayClientError("Only Jpg,jpeg,png,gif files are accepted");
}
is the code i hve written
Hi sir, it is really a nice article. Thank u very much...
I want to know 1 thing. Can we set any default directory for Upload control..?? Means initially the Upload control should have a default directory and if user wants different directory he can browse for new directory..
Thanks in advance.
AsyncFileUpload problem
http://forums.asp.net/t/1620604.aspx/1
hi,
Friends,
i'm working with ajax control and while running the program getting error system.web.ui.scriptrefrence from assembly, system.web.extensions.
I'm a new learner of ajax so plz help someone if know the solution.
works fine
simply increase the size of a file
add in web.config file
in system.web
httpRuntime maxRequestLength="40960"
...
...
sir i want to upload maximum 6 images and want to display thumbnails of image ...
can you provide solution i tired but not get solution
request to you to help me sir needed in my project
sir can you give me the code for uploading and downloading mobile software files (like .apk, etc...) and 1 minute or 5 minute (mobile supported ) video files using ajax control
Thank you
Hi Suresh,
i got issue by using your code i.e;in IE 10 when file uploaded i got web page error 'unknown server error'. whats is happens in code i con't finding .So pls give me solution.
hi suresh
it is so good
but we have a problem , can you solve it,
the problem is : when we upload file such as "a.jpg" and then try to upload a new file with same name such a.jpg" , the system replace "a.jpg" .
we need to rename file when try to uploaded it.
If i want to upload multiple files then, How?
File uploaded control is not working in modern style and working with traditional style.I don't understand whats wrong.Even Traditional style is not working in IE 8. Is there any browser dependency?
Really Good Jop :)) keep moving
if i want to upload multiple images at a time like gmail
sir, how can i save multiple files in the databse using ajaxfileupload control
I am getting error file not getting uploaded not getting reason
why,i cant press button "select file" when my mouse hover to text it can. could you tell me?
It is possible to dynamically give value to Fileupload control e.g as we give value to button text like BUtton1.Text="Add"
good keep going
Hi Suresh,
How can i upload get upload file using jquery ajax call in to webservice(.svc).How can i get uploaded file into webservice?
Hello sir, I want to do this by progress bar.
How can I limit the size of the file upload say it max file size 10MB ?? Do we have an option to do this or we have to do it via javascripting ??
thanks in advance
how to place image at the side of ajax control during upload.....Can u plz help me out...
hi suresh
i am getting error message like "File upload Failed."
when uploading file
please help.
Thank you Suresh !!
amazing site....thanx!!!!!!!
How to can I display the saved image immediate after upload from the client side code? As per my knowledge we are not getting the saved file image path in client side. Please help.
can i get the total file size(all the files uploaded)
Sir, i want to display progress bar like 1%, 2%, .....100% upload completed bar, instead of an image.
Note: Only a member of this blog may post a comment.