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文件， 並獲得文件路徑 能夠點擊連接下載。