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

webuploader 上传文件 生成链接下载文件的更多相关文章

  1. SecureCRT上传、下载文件 使用rz【上传】& sz【下载】命令

    首先安装:apt-get install lrzsz SecureCRT这款SSH客户端软件同时具备了终端仿真器和文件传输功能.比ftp命令方便多了,而且服务器不用再开FTP服务了.rz,sz是便是L ...

  2. webuploader+上传文件夹

    在web项目中上传文件夹现在已经成为了一个主流的需求.在OA,或者企业ERP系统中都有类似的需求.上传文件夹并且保留层级结构能够对用户行成很好的引导,用户使用起来也更方便.能够提供更高级的应用支撑. ...

  3. 前端js怎么实现大文件G级的断点续传(分块上传)和分段下载

    需求: 支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验: 内网百兆网络上传速度为12MB/S 服务器内存占用低 支持文件夹上传,文件夹中的文件数量达到1万个以上,且包 ...

  4. JavaWeb多文件上传及zip打包下载

    项目中经常会使用到文件上传及下载的功能.本篇文章总结场景在JavaWeb环境下,多文件上传及批量打包下载功能,包括前台及后台部分.  首先明确一点:  无法通过页面的无刷新ajax请求,直接发下载.上 ...

  5. webuploader 上传文件参数设置

    webUploader 是款很好用的优秀的开源上传组件,由百度公司开发,详细的介绍可参见webUploader 的官方文档: 最近在使用webUploader时,需要添加额外的参数,并在后台获取,参数 ...

  6. thinkphp对文件的上传,删除,下载操作

    工作需要,整理一下最近对php的学习经验,希望能对自己有帮助或者能帮助那些需要帮助的人. thinkphp对文件的操作,相对来说比较简单,因为tp封装好了一个上传类Upload.class.php 废 ...

  7. C#实现多文件上传,写到文件夹中,获取文件信息以及下载文件和删除文件

    前台:.js //上传附件 function uploadAttachment() { if ($("#Tipbind").attr('checked')) { var ip = ...

  8. webUploader上传大视频文件相关web.config配置

    在webuploader上传大文件时必须配置一下,不然请求后台处理程序时,会请求超时.出现404! <system.web> <httpRuntime maxRequestLengt ...

  9. 使用WebUploader上传HTML文件并读取文件

    需求: 前端需要上传HTML文件并识别里面有多少个特殊标签并录入到数据库. 思路: 使用WebUploader上传文件,然后使用FileReader接口和DOMParser识别HTML中的特殊标签 资 ...

随机推荐

  1. dubbox系列【三】——简单的dubbox提供者+消费者示例

    1.dubbox-provider示例 在eclipse中建立maven project,名为provider-parent,包含两个maven medule:provider-api 和 provi ...

  2. shiro整合ehcache

    目标:让Shiro整合ehcache,提供缓存realm数据的功能. 1.引入encache配置文件,配置缓存 <!-- <ehcache xmlns:xsi="http://w ...

  3. ubuntu追加磁盘空间

    在用wubi安装的时候,按默认的是20G空间,明显不够用,从Windows上追加空间 首先用win7自带的磁盘分区工具,从任意一个空余空间较多的磁盘划出一块新分区(无损数据)(如NTFS),作为ubu ...

  4. linux虚拟化概述

    虚拟化硬件虚拟化:一台物理机虚拟出多台逻辑上的计算机cpu,内存可分配给多个虚拟机软件虚拟化:一个LAMP平台支撑多个网站桌面虚拟化...... 虚拟机:通过软件平台模拟出的计算机对最终用户来说,感受 ...

  5. ActiveMQ安装及启动

    最近项目组遇到MQ的问题(项目组用的IBM MQ),突然想回来看看MQ.本来就不是太熟练,闲来无事写写看看. 不多说,首先是安转ActiveMQ,官方网址:http://activemq.apache ...

  6. 如何构造一个简单的USB过滤驱动程序

    本文分三部分来介绍如何构造一个简单的USB过滤驱动程序,包括"基本原理"."程序的实现"."使用INF安装".此文的目的在于希望读者了解基本 ...

  7. Nginx负载均衡和反向代理的配置和优化

    负载均衡 负载均衡是由多台服务器以对称的方式组成一个服务器集合,每台服务器都具有等价的地位, 反向代理 是指以代理服务器来接受internet上的请求,然后将请求转给内部的服务器 常见的负载均衡 1. ...

  8. 大数据处理的三种框架:Storm,Spark和Samza

    许多分布式计算系统都可以实时或接近实时地处理大数据流.下面对三种Apache框架分别进行简单介绍,然后尝试快速.高度概述其异同. Apache Storm 在Storm中,先要设计一个用于实时计算的图 ...

  9. R语言实现关联规则与推荐算法(学习笔记)

    R语言实现关联规则 笔者前言:以前在网上遇到很多很好的关联规则的案例,最近看到一个更好的,于是便学习一下,写个学习笔记. 1 1 0 0 2 1 1 0 0 3 1 1 0 1 4 0 0 0 0 5 ...

  10. 简述“类(class)”,“类库(class library)”,“包(package)”,“jar文件”这四个概念间的关系

    (1)类(class)实际上是对某种类型的对象定义变量和方法的原型,它表示对现实生活中的一类具有共同特征的事物的抽象. (2)为了更好地组织类,java提供了包机制.包(package)是类的容器,用 ...