Upload multiple files with Progress Bar using jQuery Uploadify Plugin in ASP.Net MVC
In this article I will explain with an example, how to upload multiple files with Progress Bar using jQuery Uploadify plugin in ASP.Net MVC Razor.
The jQuery Uploadify plugin is a Flash based jQuery Plugin which allows uploading multiple files with Progress Bar using AJAX in ASP.Net MVC Razor.
Note
: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
View
The following View consists of an HTML FileUpload element to which the jQuery Uploadify plugin will be applied.
The files required by the jQuery Uploadify plugin are placed inside a folder named Uploadify within the project.
All the necessary Script and CSS files needed for the jQuery Uploadify plugin are inherited in the HEAD section and the jQuery Uploadify plugin is applied to the HTML FileUpload element.
The script property of the jQuery Uploadify plugin is set to the Index Method of the Home Controller.
<
html
>
<
head
>
<
meta
name
=”viewport”
content
=”width=device-width”
/>
<
title
>
Index
</
title
>
<
link
rel
=”Stylesheet”
type
=”text/css”
href
=”../Uploadify/uploadify.css”
/>
<
script
type
=”text/javascript”
src
=”../Uploadify/jquery-1.3.2.min.js”></
script
>
<
script
type
=”text/javascript”
src
=”../Uploadify/jquery.uploadify.js”></
script
>
<
script
type
=”text/javascript”>
$(
function
() {
$(
“#postedFile”
).fileUpload({
‘uploader’
:
‘../Uploadify/uploader.swf’
,
‘cancelImg’
:
‘../Uploadify/cancel.png’
,
‘buttonText’
:
‘Browse Files’
,
‘script’
:
‘/Home/Index/’
,
‘folder’
:
‘Uploads’
,
‘fileDesc’
:
‘Image Files’
,
‘fileExt’
:
‘*.jpg;*.jpeg;*.gif;*.png’
,
‘multi’
:
true
,
‘auto’
:
true
});
});
</
script
>
</
head
>
<
body
>
<
div
>
<
input
type
=”file”
id
=”postedFile”
name
=”postedFile”
/>
</
div
>
</
body
>
</
html
>
Namespaces
You will need to import the following namespace.
using
System.IO;
Controller
The Action method Index by default supports the GET operation and hence another overridden method for POST operation is created which accepts the parameter which is a collection of type HttpPostedFileBase.
Note
: The name of the HttpPostedFileBase parameter must always be FileData as this variable name is used by jQuery Uploadify plugin.
A loop is executed over the HttpPostedFileBase collection and one by one each file is saved to the Directory (Folder).
public
class
HomeController
:
Controller
{
// GET: Home
[
HttpGet
]
public
ActionResult
Index()
{
return
View();
}
[
HttpPost
]
public
ActionResult
Index(
List
<
HttpPostedFileBase
> FileData)
{
string
path = Server.MapPath(
“~/Uploads/”
);
foreach
(
HttpPostedFileBase
postedFile
in
FileData)
{
if
(postedFile !=
null
)
{
string
fileName =
Path
.GetFileName(postedFile.FileName);
postedFile.SaveAs(path + fileName);
}
}
return
View();
}
}
Screenshot
Downloads
