最近 在asp.net MVC 项目 需要实现一个Excel和 图片上传功能。之前有使用过SWFUpload 做过上传图片功能,在本次实现过程中,有人推荐WebUploader 上传组件，因此采用web-Uploader 来实现文件上传功能。
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。采用大文件分片并发上传，极大的提高了文件上传效率。
关于WebUploader上传 ,百度有一个例子 ,不过 按照百度给出的流程 ,并不能实现上传功能。同时为了实现下载功能，需要返回文件上传后 的地址，许多博客都有关于如何使用WebUploader 上传文件 ，都没有涉及如何返回 文件下载地址，而且 没有关于asp.net mvc 的项目。下面 逐步介绍如何利用WebUpload实现文件上传并得到文件地址。
第一步 下载 Web Uploader 组件
进入WebUploader 官网,下载 组件;
第二步 引用 Web Uploader 和Jquery文件
参考官网 Getting Started : 引入资源 :使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF.
将 webuploader.js,Uploader.swf,webuploader.css 拷贝至项目中,分别放在特定位置,本例子中,将webuploader.js,Uploader.swf 放在文件夹 "JS"中.webuploader.css放入文件夹
"CSS"中,同时项目需要用到Jquery ,这里引用了 juqery-1.10.2.js 并将文件放入"JS"文件夹。不同版本的Jquery 可能会出现一些小问题.本例子为asp.net mvc5 例子，此页面为在Home控制器下
新建ActionResult Excel方法的视图 Excel。cshtml.
1 <link href="~/CSS/webuploader.css" rel="stylesheet" />
2 <script src="~/JS/jquery-1.10.2.js"></script>
3 <script src="~/JS/webuploader.js"></script>
第三步 创建上传文件的按钮等html元素
这里采用官网提供示例 ，同时添加一个下载a标签，将href 设置为空。
1 <div id="uploader" class="wu-example">
2 <!--用来存放文件信息-->
3 <div id="thelist" class="uploader-list"></div>
4 <div class="btns">
5 <div id="picker">选择文件</div>
6 <button id="ctlBtn" class="btn btn-default">开始上传</button>
7 </div>
8 </div>
9
10 <a href="" id="download">下载</a>
第四步 初始化WebUpload组件， 改造文件上传成功后函数
新创建Javascript文件 uploadExcel.js ，写以下代码
1 $(function () {
2 var $ = jQuery,
3 $list = $('#thelist'),
4 $btn = $('#ctlBtn'),
5 state = 'pending',
6 uploader;
7
8 uploader = WebUploader.create({
9
10 // 不压缩
11 resize: false,
12
13 // swf文件路径
14 swf: 'JS/Uploader.swf',//文件存放在JS文件夹
15
16 // 文件接收服务端。
17 server: 'UploadExcel',//本例子 asp.net mvc5 例子 页面为 Home下Excel
18 //在HomeControl控制器 添加了ActionResult UploadExce（HttpPostedFileBase file)
19 // 选择文件的按钮。可选。
20 // 内部根据当前运行是创建，可能是input元素，也可能是flash.
21 pick: '#picker',
22 //默认文件设置
23 accept: {
24 title: 'Excel',
25 extensions: 'xls,xlsx',
26 mimeTypes: 'xls/*'
27 }
28 });
29
30 // 当有文件添加进来的时候
31 uploader.on('fileQueued', function (file) {
32 $list.append('<div id="' + file.id + '" class="item">' +
33 '<h4 class="info">' + file.name + '</h4>' +
34 '<p class="state">等待上传...</p>' +
35 '</div>');
36 });
37
38 // 文件上传过程中创建进度条实时显示。
39 uploader.on('uploadProgress', function (file, percentage) {
40 var $li = $('#' + file.id),
41 $percent = $li.find('.progress .progress-bar');
42
43 // 避免重复创建
44 if (!$percent.length) {
45 $percent = $('<div class="progress progress-striped active">' +
46 '<div class="progress-bar" role="progressbar" style="width: 0%">' +
47 '</div>' +
48 '</div>').appendTo($li).find('.progress-bar');
49 }
50
51 $li.find('p.state').text('上传中');
52
53 $percent.css('width', percentage * 100 + '%');
54 });
55 //上传成功后 重点在这里 在官网提供的例子中没有提及 可以有第二个参数 respose
56 // 在本例子中，返回的是文件地址，response 可以根据不同需求 进行修改
57 uploader.on('uploadSuccess', function (file, resporse) {
58 $('#' + file.id).find('p.state').text('已上传');
59
60 $("#download").attr("href", resporse.filepath)//对a标签 href 赋值
61
62 });
63
64 uploader.on('uploadError', function (file) {
65 $('#' + file.id).find('p.state').text('上传出错');
66 });
67
68 uploader.on('uploadComplete', function (file) {
69 $('#' + file.id).find('.progress').fadeOut();
70
71 });
72
73 uploader.on('all', function (type) {
74 if (type === 'startUpload') {
75 state = 'uploading';
76 } else if (type === 'stopUpload') {
77 state = 'paused';
78 } else if (type === 'uploadFinished') {
79 state = 'done';
80 }
81
82 if (state === 'uploading') {
83 $btn.text('暂停上传');
84 } else {
85 $btn.text('开始上传');
86 }
87 });
88
89 $btn.on('click', function () {
90 if (state === 'uploading') {
91 uploader.stop();
92 } else {
93 uploader.upload();
94 }
95 });
96 });
第五步 在Home控制器中添加 UploadExcel 方法
本例，将文件存储在文件夹Data/Excel 中，同时，在添加文件时，将文件存在 年/月/日 下。
public ActionResult UploadExcel(HttpPostedFileBase file)
{
string fileName = string .Empty;//文件名
string dir = string.Empty;//文件相对路径
if (file != null)
{
fileName = Path.GetFileName(file.FileName);
string fileExt = Path.GetExtension(fileName);//文件扩展名
if (fileExt == ".xls" || fileExt == ".xlsx")
{
//文件存储在Data/Excel/年/月/日 下
dir = "\\Data\\Excel\\" + DateTime.Now.Year + "\\" + DateTime.Now.Month + "\\" + DateTime.Now.Day;
string newfilepath = System.Web.HttpContext.Current.Server.MapPath(dir);//获取物理路径,很重要
if (!Directory.Exists(newfilepath)) // 创建文件夹
{
Directory.CreateDirectory(newfilepath);
}
string path = newfilepath + "\\" + fileName; //真实地址
file.SaveAs(path);//存储文件
}
}
return Json(new { jsonrpc = "2.0",
filePath = dir + "/" + fileName //相对位置
});//返回文件存储相对路径 在进行文件下载时 地址必须为相对地址之前 ，将地址返回为绝对路径 。程序报错 ，大意为： 程序不能访问该文件， 百度后，说将文件夹权限设置为 ：”完全控制
//尝试了无数次 均已失败告终， 这里最好设置相对路径，
第六步 在Excel.Cshtml 中添加 UploadExcel.js ， 最终运行
1 <script src="~/JS/UploadExcel.js"></script>
启动调试 ，输入 Home/excel ，选择中国省市数据库大全 .xls
点击下载
总结
最终实现了在Asp.net MVC 项目 利用 WebUploader 上传Excel文件， 并得到文件路径 可以点击链接下载。
