Asp.Net Mvc 带进度条大文件上传(附源码下载)

时间:2022-08-29 16:42:45

在Web开发中经常会遇到文件上传的功能,如果是小文件,很简单;如果遇到的客户需要上传几个G甚至几十G、几百G的文件,那么就出现问题了!为了安全起见,Mvc的Config设置根本就不允许上传这么大的文件。经过多次试验比较,我向朋友介绍一种简单易懂的方法:借助于Jquery的JqUploader控件。

环境

     Asp.Net Mvc3 + Vs2010

使用的脚本

     jquery-1.5.1.min.js  、jquery.flash.js、 jquery.jqUploader.js

配置Webconfig

<httpRuntime executionTimeout="300" maxRequestLength="2097151" useFullyQualifiedRedirectUrl="false"/>

executionTimeout设置最大请求时间,maxRequestLength设置上传文件的最大限制

代码

Asp.Net Mvc 带进度条大文件上传(附源码下载)
1 @using (Html.BeginForm("upfile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
2 {
3
4 <input id="file1" type="file" name="file1" />
5 }
Asp.Net Mvc 带进度条大文件上传(附源码下载)

 

脚本

Asp.Net Mvc 带进度条大文件上传(附源码下载)
 1 <script type="text/javascript">
2 $(document).ready(function() {
3 $("#file1").jqUploader({
4 background: "FFFFDF",
5 barColor: "64A9F6",
6 allowedExt: "*",
7 allowedExtDescr: "*",
8 hideSubmit: true
9 });
10 });
11 </script>
Asp.Net Mvc 带进度条大文件上传(附源码下载)

 

jqUploader 的属性可以自己修改,在jquery.jqUploader.js中根据自己的需要修改。详细的JqUpload使用可以参考网址:http://www.pixeline.be/experiments/jqUploader/

 

后台Action代码

Asp.Net Mvc 带进度条大文件上传(附源码下载)
 1 int iTotal = Request.Files.Count;
2 if (iTotal == 0)
3 {
4 Response.Write("<script> alert('没有数据');</script>");
5 }
6 else
7 {
8 for (int i = 0; i < iTotal; i++)
9 {
10 HttpPostedFileBase file = Request.Files[i];
11 if (file.ContentLength > 0 || !string.IsNullOrEmpty
12 (file.FileName))
13 {
14 //保存文件
15 string diect = Path.Combine(AppDomain.CurrentDomain.BaseDirectory,"Upload");
16 string filename = Path.GetFileName(file.FileName);
17 string savepath = string.Format("{0}\\{1}", diect, filename);
18 file.SaveAs(savepath);
19 }
20 }
21 }
22 return RedirectToAction("Index");
Asp.Net Mvc 带进度条大文件上传(附源码下载)

 

OK,大文件的上传功能就完成了。

源码下载:/Files/zhumeimei/MvcApplication1.zip