In this asp .net tutorial we will learn how to use Ajax control toolkit's AjaxFileUpload control to upload multiple files. AjaxFileUpload is free control which is a part of Ajax Control toolkit library.AjaxFileUpload has very great features like:
1) AjaxFileUpload control has File Upload Progress.
2) AjaxFileUpload control can uploadVery Large Files (greater than 1 Gigabyte).
3) AjaxFileUpload control can Upload Multiple Files at a Time.
4) AjaxFileUpload control has Drag-and-Drop File interface to Upload files.
Step1: Create a new website.
Step2: Add Ajax control toolkit to website.
You can refer this article: 3 Different ways to add AjaxControlToolkit in Asp .Net Website.
Step3: Add following code to aspx page.
Step4: Add following code to aspx.cs page.
protected void AjaxFileUpload1_UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
{
string fileNameWithPath = Server.MapPath("~/UploadedImages/") + e.FileName.ToString();
AjaxFileUpload1.SaveAs(fileNameWithPath);
}
Step5: Create a folder in website to store images.
Here I have created "UploadedImages" folder to store images. You can rename it to your choice.
Events, Properties and Methods of AjaxFileUpload control:
(Source www.Asp.net)
Events
1) UploadedComplete - Raised on the server when a file is uploaded successfully. In this event an instance of AjaxFileUploadEventArgs is passed in the argument that contains file name, size and content type.
2) UploadedCompleteAll - Raised on the server when all files are uploaded.
3) UploadedStart - Raised on the server before any files are uploaded.
Properties
1) Mode - Determines how upload progress is displayed. Possible values are Auto (the default), Client, and Server. If, for example, you want force the AjaxFileUpload control to display upload progress by using server-side polling then set Mode="Server".
2) ThrobberID - The ID of a control that is shown while the file is uploading. The throbber image is displayed for browsers that do not support the HTML5 File API or server-side polling.
3) ContextKeys - A dictionary that can be used to pass information to the server when a file is uploaded.
4) MaximumNumberOfFiles - This property enables you to limit the number of files that a user can add to the upload queue.
5) AllowedFileTypes - This property enables you to restrict the types of files that can be uploaded. You can assign a comma delimited list of file extensions to this property.
6) IsInFileUploadPostBack - This property has the value true when a page is created in response to an AjaxFileUpload asynchronous postback.
7) OnClientUploadComplete - The name of a JavaScript function executed on the client-side after a file is uploaded successfully.
8) OnClientUploadError - The name of a JavaScript function executed on the client-side if the file upload failed.
9) OnClientUploadCompleteAll - The name of a JavaScript function executed on the client-side after all files are uploaded.
10) OnClientUploadStart - The name of a JavaScript function executed on the client-side before any files are uploaded.
Methods
1) SaveAs(string filename) - Saves the contents of an uploaded file to the file system. Your application must have the required Write permissions.
2) CleanAllTemporaryData() - Delete all temporary uploaded files from temporary folder.