Webuploader 大文件分片上传
百度Webuploader 大文件分片上传(.net接收)
前阵子要做个大文件上传的功能,找来找去发现Webuploader还不错,关于她的介绍我就不再赘述。
动手前,在园子里找到了一篇不错的分片上传的帖子,参考之后,踏出了第一步。此文记录我这次实践的点滴,仅作分享与讨论。
关于插件的使用可以参考快速使用文档。在Github上下载了最新的压缩包后,基于其中的一个例子(image-upload)做了修改,主要是补充了.net后台分片接收文件的实现。
先上干货:WebUploadTest.zip 提取码:fikn
分片上传的上传逻辑已经有控件实现。保存分片的逻辑是:
每次上传文件,用js生成一个guid。请看upload.js 87行
GUID = WebUploader.Base.guid()
webuploader配置参数时会用到上面的guid。上传并发数自己改吧,>1经过测试貌似也可以(我一开始用其他代码测试时>1有报错过,如有出错留作讨论)
后台根据前端的guid,生成一个临时文件夹,文件夹的用guid的值命名。然后分片文件以当前分片序数命名,保存在临时文件夹。fileupload.ashx 24行

//取得chunk和chunks
int chunk = Convert.ToInt32(context.Request.Form["chunk"]);//当前分片在上传分片中的顺序(从0开始)
int chunks = Convert.ToInt32(context.Request.Form["chunks"]);//总分片数
//根据GUID创建用该GUID命名的临时文件夹
string folder = context.Server.MapPath("~/1/" + context.Request["guid"]+"/");
string path = folder + chunk;//每个分片用数字命名

后台每次返回一个json字符串。关于这个返回值是可以像构造ajax返回参数一样自定义的。我是这样返回与接收的。请看fileupload.ashx 57行起

//...
context.Response.Write("{\"chunked\" : true, \"hasError\" : false, \"f_ext\" : \"" + Path.GetExtension(file.FileName) + "\"}");
}
else//没有分片直接保存
{
context.Request.Files[0].SaveAs(context.Server.MapPath("~/1/" + DateTime.Now.ToFileTime() + Path.GetExtension(context.Request.Files[0].FileName)));
context.Response.Write("{\"chunked\" : false, \"hasError\" : false}");
}
//...

接收的js如下:upload.js 544行

// 文件上传成功,合并文件。
uploader.on('uploadSuccess', function (file, response) {
if (response.chunked) {
$.post("MergeFiles.ashx", { guid: GUID, fileExt: response.f_ext },
function (data) {
data = $.parseJSON(data);
if (data.hasError) {
alert('文件合并失败!');
} else {
alert(decodeURIComponent(data.savePath));
}
});
}
});

由于上传时,文件分片保存于以guid的值命名的文件夹中,所有,在单个文件全部上传完毕之后,再发送一个异步请求到 MergeFiles.ashx 合并文件,合并是将临时文件夹里的文件按文件名顺序合并(文件名是数字)。
运行本代码,在浏览器控制台可以观察插件上传文件的各个事件。
webuploader支持断点续传,但是由于官网例子的原因,我这个例子上的断点是不能停止的,这里容我把乐趣留给大家。webuploader官网api有答案,改起来挺简单的。呵呵
Webuploader 大文件分片上传的更多相关文章
- 百度Webuploader 大文件分片上传(.net接收)
前阵子要做个大文件上传的功能,找来找去发现Webuploader还不错,关于她的介绍我就不再赘述. 动手前,在园子里找到了一篇不错的分片上传的帖子,参考之后,踏出了第一步.此文记录我这次实践的点滴,仅 ...
- asp.net mvc+webuploader大文件分片上传
首先是前端: var GUID = WebUploader.Base.guid();//一个GUID uploadereditsVideo = WebUploader.create({ // swf文 ...
- 百度Webuploader 大文件分片上传(.net接收)
版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...
- thinkphp+webuploader实现大文件分片上传
大文件分片上传,简单来说就是把大文件切分为小文件,然后再一个一个的上传,到最后由这些小文件再合并成原来的文件 webuploader下载地址及其文档:http://fex.baidu.com/webu ...
- 在React中使用WebUploader实现大文件分片上传的踩坑日记!
前段时间公司项目有个大文件分片上传的需求,项目是用React写的,大文件分片上传这个功能使用了WebUploader这个组件. 具体交互是: 1. 点击上传文件button后出现弹窗,弹窗内有选择文件 ...
- Vue2.0结合webuploader实现文件分片上传
Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...
- java springboot 大文件分片上传处理
参考自:https://blog.csdn.net/u014150463/article/details/74044467 这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时 ...
- vue+大文件分片上传
最近公司在使用vue做工程项目,实现大文件分片上传. 网上找了一天,发现网上很多代码都存在很多问题,最后终于找到了一个符合要求的项目. 工程如下: 对项目的大文件上传功能做出分析,怎么实现大文件分片上 ...
- iOS大文件分片上传和断点续传
总结一下大文件分片上传和断点续传的问题.因为文件过大(比如1G以上),必须要考虑上传过程网络中断的情况.http的网络请求中本身就已经具备了分片上传功能,当传输的文件比较大时,http协议自动会将文件 ...
随机推荐
- Little Sympathy for Bear Stearns : NPR
Little Sympathy for Bear Stearns : NPR Little Sympathy for Bear Stearns
- Restlet+Fastjson 高速构建轻量级 Java RESTful Webservice
自己入门Java时做过一个小型RESTful Web Service的项目,这里总结一下. 服务的数据交换格式主要採用JSON,服务为REST风格.连接採用Http协议,数据库使用MySQL,OR M ...
- 【翻译】我钟爱的Visual Studio前端开发工具/扩展
原文:[翻译]我钟爱的Visual Studio前端开发工具/扩展 怎么样让Visual Studio更好地编写HTML5, CSS3, JavaScript, jQuery,换句话说就是如何更好地做 ...
- TextView中如何支持html标签,放置图片和动作标签
TextView文本框和输入框几乎是一个正常的带界面的可交互的Android应用的基本组成 TextView主要作用是显示文本内容,其实还可以显示图片,当然有必要的话还可以为文本内容添加动作相应用户的 ...
- 4句代码读取Excel到DataSet(非Excel组件)
Toxy是继NPOI之后主推的还有一个项目,主要目的是为了解决文档的抽取问题.其支持的格式包括全部docx.xlsx.xls.csv.vcard等. 以下是一个简单但非常实用的样例 ParserCon ...
- 《JavaScript设计模式与开发实践》读书笔记之观察者模式
1.观察者模式 观察者模式定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. JavaScript中通常采用事件模型替代传统的观察者模式 1.1 逐步实现观 ...
- CSS背景图拉伸自适应尺寸
.bg{ background:url(images/test.jpg); filter:"progid:DXImageTransform.Microsoft.AlphaImageLoade ...
- jQuery获取url参数值
$.extend({ getUrlVars: function () { var vars = [], hash; var hashes = window.location.href.slice(wi ...
- Access之C#连接Access
原文:Access之C#连接Access 如果是个人用的小程序的话.一般都推荐用Sqlite和Access 使用SQlite数据库需要安装SQLite驱动,详情:SQLite之C#连接SQLite 同 ...
- sql server事物控制
一.多个数据库 1.存储过程 2.Commit写在 Try...Catch后面 protected void Button1_Click(object sender, EventArgs e) ...