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
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.
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’.
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: