最近 在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 官网,下载 组件; 网址: http://fex.baidu.com/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.
<link href="~/CSS/webuploader.css" rel="stylesheet" />
<script src="~/JS/jquery-1.10.2.js"></script>
<script src="~/JS/webuploader.js"></script>
第三步 创建上传文件的按钮等html元素
这里采用官网提供示例 ，同时添加一个下载a标签，将href 设置为空。
<div id="uploader" class="wu-example">
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="picker">选择文件</div>
<button id="ctlBtn" class="btn btn-default">开始上传</button>
</div>
</div> <a href="" id="download">下载</a>
第四步 初始化WebUpload组件， 改造文件上传成功后函数
新创建Javascript文件 uploadExcel.js ，写以下代码
$(function () {
var $ = jQuery,
$list = $('#thelist'),
$btn = $('#ctlBtn'),
state = 'pending',
uploader;
uploader = WebUploader.create({
// 不压缩
resize: false,
// swf文件路径
swf: 'JS/Uploader.swf',//文件存放在JS文件夹
// 文件接收服务端。
server: 'UploadExcel',//本例子 asp.net mvc5 例子 页面为 Home下Excel
//在HomeControl控制器 添加了ActionResult UploadExce（HttpPostedFileBase file)
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#picker',
//默认文件设置
accept: {
title: 'Excel',
extensions: 'xls,xlsx',
mimeTypes: 'xls/*'
}
});
// 当有文件添加进来的时候
uploader.on('fileQueued', function (file) {
$list.append('<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上传...</p>' +
'</div>');
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if (!$percent.length) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo($li).find('.progress-bar');
}
$li.find('p.state').text('上传中');
$percent.css('width', percentage * + '%');
});
//上传成功后 重点在这里 在官网提供的例子中没有提及 可以有第二个参数 respose
// 在本例子中，返回的是文件地址，response 可以根据不同需求 进行修改
uploader.on('uploadSuccess', function (file, resporse) {
$('#' + file.id).find('p.state').text('已上传');
$("#download").attr("href", resporse.filepath)//对a标签 href 赋值
});
uploader.on('uploadError', function (file) {
$('#' + file.id).find('p.state').text('上传出错');
});
uploader.on('uploadComplete', function (file) {
$('#' + file.id).find('.progress').fadeOut();
});
uploader.on('all', function (type) {
if (type === 'startUpload') {
state = 'uploading';
} else if (type === 'stopUpload') {
state = 'paused';
} else if (type === 'uploadFinished') {
state = 'done';
}
if (state === 'uploading') {
$btn.text('暂停上传');
} else {
$btn.text('开始上传');
}
});
$btn.on('click', function () {
if (state === 'uploading') {
uploader.stop();
} else {
uploader.upload();
}
});
});
第五步 在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 ， 最终运行
<script src="~/JS/UploadExcel.js"></script>
启动调试 ，输入 Home/excel ，选择中国省市数据库大全 .xls
点击下载
总结
最终实现了在Asp.net MVC 项目 利用 WebUploader 上传Excel文件， 并得到文件路径 可以点击链接下载。