resumable.js —— 基于 HTML 5 File API 的文件上传组件 支持续传

简介: resumable.js是一个 JavaScript 库,通过 HTML5 文件 API 提供了稳定和可恢复的批量上传功能。在上传大文件的时候将文件分割成小块,每块在上传失败的时候,上传会不断重试直到程序完成。这允许上传到本地或服务器的网络连接丢失后能够自动恢复上传。由于采用了分块技术,它也允许用户暂停和恢复上传。

resumable.js是一个 JavaScript 库,通过 HTML5 文件 API 提供了稳定和可恢复的批量上传功能。在上传大文件的时候将文件分割成小块,每块在上传失败的时候,上传会不断重试直到程序完成。这允许上传到本地或服务器的网络连接丢失后能够自动恢复上传。由于采用了分块技术,它也允许用户暂停和恢复上传。

image.png


使用方法

创建一个新的 Resumable 对象:

var r = new Resumable({

 target:'/api/photo/redeem-upload-token',

 query:{upload_token:'my_token'}

});

// 如果浏览器不支持 Resumable.js,使用替代方案。

if(!r.support) location.href = '/some-old-crappy-uploader';

支持选择、拖放文件:

r.assignBrowse(document.getElementById('browseButton'));

r.assignDrop(document.getElementById('dropTarget'));

设定之后,监听相应的事件:

r.on('fileAdded', function(file, event){

   ...

 });

r.on('fileSuccess', function(file, message){

   ...

 });

r.on('fileError', function(file, message){

   ...

 });


项目主页

https://github.com/23/resumable.js

相关文章
|
1月前
|
JavaScript 前端开发 API
常用JavaScript 数组 API大全
常用JavaScript 数组 API大全
32 0
|
1月前
|
JavaScript
Vue.js 修饰符:精准控制组件行为
Vue.js 修饰符:精准控制组件行为
|
1月前
|
API
egg.js 24.2写第一个api接口
egg.js 24.2写第一个api接口
71 0
|
1月前
|
存储 JavaScript 前端开发
HTML API
HTML API
27 3
|
6天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
21 10
|
15天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
N..
|
29天前
|
JavaScript 前端开发 测试技术
Vue.js的组件
Vue.js的组件
N..
13 1
|
1月前
|
JavaScript 计算机视觉
纯js实现人脸识别眨眨眼张张嘴案例——index.html
纯js实现人脸识别眨眨眼张张嘴案例——index.html
16 0
|
1月前
|
JavaScript 前端开发 API
JavaScript循环遍历常用的7种方法以及常用的数组 API
JavaScript循环遍历常用的7种方法以及常用的数组 API
35 0
|
1月前
|
Web App开发 JavaScript 前端开发
使用Node.js和Express构建RESTful API
使用Node.js和Express构建RESTful API
18 0