百度webuploader如何实现秒传与断点续传
因为这是小众需求,所以默认没有做在webuploader里面,而只是提供hook接口,让用户很简单的扩展此功能。
那么,都有哪些重要的hook接口呢?
before-send-file
此hook在文件发送之前执行before-file
此hook在文件分片(如果没有启用分片,整个文件被当成一个分片)后,上传之前执行。after-send-file
此hook在文件所有分片都上传完后,且服务端没有错误返回后执行。- ...
对于秒传来说,其实就是文件上传前,把内容读取出来,算出md5值,然后通过ajax与服务端验证进行验证, 然后根据结果选择继续上传还是掉过上传。
像这个操作里面有两个都是异步操作,文件内容blob读取和ajax请求。所以这个handler
必须是异步的,怎样告诉组件此handler
是异步的呢?只需要在hanlder
里面返回一个promise对象就可以了,这样webuploader就会等待此过程,监听此promise的完成事件,自动继续。
以下是此思路的简单实现。
Uploader.register({
'before-send-file': 'preupload'
}, {
preupload: function( file ) {
var me = this,
owner = this.owner,
server = me.options.server,
deferred = WebUploader.Deferred(); owner.md5File( file.source ) // 如果读取出错了,则通过reject告诉webuploader文件上传出错。
.fail(function() {
deferred.reject();
}) // md5值计算完成
.then(function( md5 ) { // 与服务安验证
$.ajax(server, {
dataType: 'json',
data: {
md5: ret
},
success: function( response ) { // 如果验证已经上传过
if ( response.exist ) {
owner.skipFile( file ); console.log('文件重复,已跳过');
} // 介绍此promise, webuploader接着往下走。
deferred.resolve();
}
});
}); return deferred.promise();
}
});
详情参考:https://github.com/fex-team/webuploader/issues/142
百度webuploader如何实现秒传与断点续传的更多相关文章
- 基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件
目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7 ...
- 记录: 百度webuploader 分片文件上传java服务器端(spring mvc)示例的优化
最近项目上用到文件分片上传,于是找到了百度的一个开源前端控件webuploader. 于是尝试使用. 下载下来后,它提供的服务器端示例代码是php版的,那么Java版的呢? 其实,上传文件都是按照rf ...
- 对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)
前言 本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文 使用方式同 ...
- 打造 html5 文件上传组件,实现进度显示及拖拽上传,支持秒传+分片上传+断点续传,兼容IE6+及其它标准浏览器
老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery ...
- 30分钟玩转Net MVC 基于WebUploader的大文件分片上传、断网续传、秒传(文末附带demo下载)
现在的项目开发基本上都用到了上传文件功能,或图片,或文档,或视频.我们常用的常规上传已经能够满足当前要求了, 然而有时会出现如下问题: 文件过大(比如1G以上),超出服务端的请求大小限制: 请求时间过 ...
- 使用百度webuploader实现大文件上传
版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...
- 百度Webuploader 大文件分片上传(.net接收)
版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...
- b/s利用webuploader实现超大文件分片上传、断点续传
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
- 前端利用webuploader实现超大文件分片上传、断点续传
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
随机推荐
- 前端(4)BOM与DOM
前端(4)BOM与DOM I/O前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交 ...
- tf–idf算法解释及其python代码
tf–idf算法python代码实现 这是我写的一个tf-idf的简单实现的代码,我们知道tfidf=tf*idf,所以可以分别计算tf和idf值在相乘,首先我们创建一个简单的语料库,作为例子,只有四 ...
- 重新学习Spring注解——扩展原理
39.扩展原理-BeanFactoryPostProcessor 40.扩展原理-BeanDefinitionRegistryPostProcessor 41.扩展原理-ApplicationList ...
- 深度学习查看GPU实时使用情况
1.CPU使用情况查看 动态查看 打开终端,输入: $ top按Ctrl+C退出查看. 即可看到实时的CPU使用情况. 查看版本 $ top -h 即可看到当前procps-ng的版本. 2. gp ...
- 历届试题 危险系数-(dfs+记录路径)
历届试题 危险系数 问题描述 抗日战争时期,冀中平原的地道战曾发挥重要作用. 地道的多个站点间有通道连接,形成了庞大的网络.但也有隐患,当敌人发现了某个站点后,其它站点间可能因此会失去联系. 我 ...
- [codevs2460]树的统计
题目描述 Description 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w. 我们将以下面的形式来要求你对这棵树完成一些操作: I. CHAN ...
- qt中窗体全屏
原文地址:https://www.cnblogs.com/wiessharling/p/3750461.html 近期在学习QT时遇到了很多问题这也是其中一个,个人通过在各种书籍和网络上的查阅找到了一 ...
- three.js 测试1
关键看一下里面的注释 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...
- js中a + 1 < a等于true,(a ==1 && a== 2 && a==3) 等于 true如何实现
先说a + 1 < a const a = { i: 1, valueOf: () => { if (a.i === 1) { return a.i++; } return a.i+2; ...
- 2017年计算语义相似度最新论文,击败了siamese lstm,非监督学习
Page 1Published as a conference paper at ICLR 2017AS IMPLE BUT T OUGH - TO -B EAT B ASELINE FOR S EN ...