Upload Multiple Files in ASP.NET using jQuery
2009-09-27 17:21
1911 查看
Continuing my ‘no less than an exciting’ journey of exploring ASP.NET with jQuery, today’s article will demonstrate how to Upload multiple files in ASP.NET using jQuery. Fyneworks.com has created a ‘jQuery Multiple File Upload Plugin’. You can download this plug-in here http://www.fyneworks.com/jquery/multiple-file-upload/
As described by the creator of this plug-in, The Multiple File Upload Plugin (jQuery.MultiFile) is a non-obstrusive plugin for the jQuery Javascript library that helps users easily select multiple files for upload quickly and easily whilst also providing some basic validation functionality to help developers idenfity simple errors, without having to submit the form (ie.: upload files).
In this article, I will demonstrate how to use this plug-in with ASP.NET to upload multiple files. We will also display information about the files uploaded – like the name, size and type of the file.
I assume you are familiar with jQuery. If you are new to jQuery, then before moving ahead, I would recommend you to check out Using jQuery with ASP.NET - A Beginner's Guide. Please do take a note that this article uses jQuery’s current version - jQuery 1.3.2 and jQuery 1.3.2 Visual Studio 2008 Autocomplete documentation.
Step 1: Open Visual Studio 2008 > File > New > Website > Choose ‘ASP.NET 3.5 website’ from the templates > Choose your language (C# or VB) > Enter the location > Ok. In the Solution Explorer, right click your project > New Folder > rename the folder as ‘Scripts’.
Step 2: Download jQuery 1.3.2 , jQuery VS 2008 Doc and the Multiple File Upload PlugIn. Create a ‘Scripts’ folder in the Solution Explorer of your project and add these files to this folder.
Assuming you have downloaded these files, create a reference to these files in the <head> section of your page as shown below:
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.MultiFile.js" type="text/javascript"></script>
</head>
Step 3: Now drag and drop an ASP.NET ‘FileUpload’ control from the toolbox to the page. Also add a Button control to the page. This Button control will trigger the upload to the server.
<div>
<asp:FileUpload ID="FileUpload1" runat="server" class="multi" />
<br />
<asp:Button ID="btnUpload" runat="server" Text="Upload All"
onclick="btnUpload_Click" />
</div>
Observe that the FileUpload has class=”multi” set on it. This attribute is mandatory.
Step 4: The last step is to add code to upload button. Add the following code:
C#
protected void btnUpload_Click(object sender, EventArgs e)
{
try
{
// Get the HttpFileCollection
HttpFileCollection hfc = Request.Files;
for (int i = 0; i < hfc.Count; i++)
{
HttpPostedFile hpf = hfc[i];
if (hpf.ContentLength > 0)
{
hpf.SaveAs(Server.MapPath("MyFiles") + "\\" +
System.IO.Path.GetFileName(hpf.FileName));
Response.Write("<b>File: </b>" + hpf.FileName + " <b>Size:</b> " +
hpf.ContentLength + " <b>Type:</b> " + hpf.ContentType + " Uploaded Successfully <br/>");
}
}
}
catch (Exception ex)
{
}
}
As shown in the code sample above, the ‘HttpFileCollection’ class is used to retrieve all the files that are uploaded. Files are encoded and transmitted in the content body using multipart MIME format with an HTTP Content-Type header. ASP.NET extracts this information from the content body into individual members of an HttpFileCollection.
The ‘HttpPostedFile’ class provides methods and properties to access the contents and properties of each file. In our case, we use this class to check the length, name and type of the file.
That’s it. Click on the ‘Browse’ button to upload a file, one at a time. To upload more than one file, click on the Browse button again and select the file you would like to upload. For demonstration purposes, I have selected five .jpg files.
If you desire to restrict file types or specify the maximum number of files that can be uploaded, check these examples.
It’s also quite simple to remove a selected file from the list. Just click on the cross ‘x’ to the left of each file. For eg: We will remove DesertLandscape.jpg by clicking on the cross ‘x’.
Once you have finally decided upon the files to be uploaded, click on the ‘Upload All’ button to upload the files to the server. After the upload, a message will be displayed to the user as shown below:
Note: There could be some issues related to permissions, filesize etc. while uploading files on a server. I have highlighted some issues and their possible solutions in the section Some important points to consider while uploading
I hope this article was useful and I thank you for viewing it. The entire source code of this article can be downloaded over here
As described by the creator of this plug-in, The Multiple File Upload Plugin (jQuery.MultiFile) is a non-obstrusive plugin for the jQuery Javascript library that helps users easily select multiple files for upload quickly and easily whilst also providing some basic validation functionality to help developers idenfity simple errors, without having to submit the form (ie.: upload files).
In this article, I will demonstrate how to use this plug-in with ASP.NET to upload multiple files. We will also display information about the files uploaded – like the name, size and type of the file.
I assume you are familiar with jQuery. If you are new to jQuery, then before moving ahead, I would recommend you to check out Using jQuery with ASP.NET - A Beginner's Guide. Please do take a note that this article uses jQuery’s current version - jQuery 1.3.2 and jQuery 1.3.2 Visual Studio 2008 Autocomplete documentation.
Step 1: Open Visual Studio 2008 > File > New > Website > Choose ‘ASP.NET 3.5 website’ from the templates > Choose your language (C# or VB) > Enter the location > Ok. In the Solution Explorer, right click your project > New Folder > rename the folder as ‘Scripts’.
Step 2: Download jQuery 1.3.2 , jQuery VS 2008 Doc and the Multiple File Upload PlugIn. Create a ‘Scripts’ folder in the Solution Explorer of your project and add these files to this folder.
Assuming you have downloaded these files, create a reference to these files in the <head> section of your page as shown below:
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.MultiFile.js" type="text/javascript"></script>
</head>
Step 3: Now drag and drop an ASP.NET ‘FileUpload’ control from the toolbox to the page. Also add a Button control to the page. This Button control will trigger the upload to the server.
<div>
<asp:FileUpload ID="FileUpload1" runat="server" class="multi" />
<br />
<asp:Button ID="btnUpload" runat="server" Text="Upload All"
onclick="btnUpload_Click" />
</div>
Observe that the FileUpload has class=”multi” set on it. This attribute is mandatory.
Step 4: The last step is to add code to upload button. Add the following code:
C#
protected void btnUpload_Click(object sender, EventArgs e)
{
try
{
// Get the HttpFileCollection
HttpFileCollection hfc = Request.Files;
for (int i = 0; i < hfc.Count; i++)
{
HttpPostedFile hpf = hfc[i];
if (hpf.ContentLength > 0)
{
hpf.SaveAs(Server.MapPath("MyFiles") + "\\" +
System.IO.Path.GetFileName(hpf.FileName));
Response.Write("<b>File: </b>" + hpf.FileName + " <b>Size:</b> " +
hpf.ContentLength + " <b>Type:</b> " + hpf.ContentType + " Uploaded Successfully <br/>");
}
}
}
catch (Exception ex)
{
}
}
As shown in the code sample above, the ‘HttpFileCollection’ class is used to retrieve all the files that are uploaded. Files are encoded and transmitted in the content body using multipart MIME format with an HTTP Content-Type header. ASP.NET extracts this information from the content body into individual members of an HttpFileCollection.
The ‘HttpPostedFile’ class provides methods and properties to access the contents and properties of each file. In our case, we use this class to check the length, name and type of the file.
That’s it. Click on the ‘Browse’ button to upload a file, one at a time. To upload more than one file, click on the Browse button again and select the file you would like to upload. For demonstration purposes, I have selected five .jpg files.
If you desire to restrict file types or specify the maximum number of files that can be uploaded, check these examples.
It’s also quite simple to remove a selected file from the list. Just click on the cross ‘x’ to the left of each file. For eg: We will remove DesertLandscape.jpg by clicking on the cross ‘x’.
Once you have finally decided upon the files to be uploaded, click on the ‘Upload All’ button to upload the files to the server. After the upload, a message will be displayed to the user as shown below:
Note: There could be some issues related to permissions, filesize etc. while uploading files on a server. I have highlighted some issues and their possible solutions in the section Some important points to consider while uploading
I hope this article was useful and I thank you for viewing it. The entire source code of this article can be downloaded over here
相关文章推荐
- Multiple Files Upload in ASP.NET and ASP.NET with jQuery
- 【转】In ASP.NET using jQuery Uploadify upload attachment
- Upload Large Files in ASP.NET Using HttpModule
- Upload Large Files in ASP.NET Using HttpModule
- 【转载】在ASP.NET 2.0 中如何使用多个Sitemap文件【Using Multiple Sitemap Files in ASP.NET 2.0--英文】
- File Upload using jQuery AJAX in ASP.NET Web API or Http handler (AJAX上传文件通过Web API或 http handler)
- Upload Files In ASP.NET Core 1.0 (Form POST And JQuery Ajax)
- Preview Word files (docx) in HTML using ASP.NET, OpenXML and LINQ to XML
- csharp:Learn how to post JSON string to generic Handler using jQuery in ASP.Net
- Querying XML Files Using XPATH in ASP.NET
- Using jQuery for AJAX in ASP.NET
- Send and Receive JSON objects to Web Service Methods using jQuery AJAX in ASP.Net
- Saving and Displaying Photos in SQL Server using ASP.NET and FileUpload Control
- Storing Binary Files Directly in the Database Using ASP.NET 2.0
- http://venkatbaggu.com/file-upload-in-asp-net-mvc-using-dropzone-js-and-html5/
- Upload Files Using ASP.NET Impersonation and UNC Share
- Upload files in ASP.NET MVC with JavaScript and C#
- Prevent Multiple Logins Using the Cache in ASP.NET
- 在ASP.NET中实现多文件上传(三)---jQuery Multiple File Upload Plugin
- Using ASP.NET and jQuery to Pass Multiple Values from a GridView to Another Page