webuploader 上传文件 生成链接下载文件

最近 在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文件， 并得到文件路径 可以点击链接下载。