webuploader 上传文件生成链接下载文件-白红宇

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

阅读量：5905 次

发布时间：2019-06-19

本文共 5546 字，大约阅读时间需要 18 分钟。

最近在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     
     2       3

第三步创建上传文件的按钮等html元素

这里采用官网提供示例，同时添加一个下载a标签，将href 设置为空。

1  
     
       2         
       3         
      
 4         
      
        5             
       
        选择文件
       
 6             
        7         
      
 8  
     
 9   10   下载

第四步初始化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('
     
      ' +33             '
      ' + file.name + '
' +34             '
      等待上传...
' +35             '
     
');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 = $('
     
      ' +46                 '
      
       ' +47                 '
      
' +48                 '
     
').appendTo($li).find('.progress-bar');49         }50 51         $li.find('p.state').text('上传中');52 53         $percent.css('width', percentage * 100 + '%');54     });55     //上传成功后   重点在这里  在官网提供的例子中没有提及 可以有第二个参数 respose56    // 在本例子中，返回的是文件地址，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 ，最终运行

启动调试，输入 Home/excel ，选择中国省市数据库大全 .xls

点击下载

总结

最终实现了在Asp.net MVC 项目利用 WebUploader 上传Excel文件，并得到文件路径可以点击链接下载。

转载于:https://www.cnblogs.com/hlx-blogs/p/7212130.html

你可能感兴趣的文章