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.

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文件， 并获得文件路径 能够点击连接下载。