七牛 JavaScript 浏览器文件上传 js sdk.
使用 TypeScript 编写,不依赖任何三方库,纯代码不包含任何界面元素,使用 HTML5 文件 API 上传(目前和未来不会支持 HTML4 以及 FLASH)。
支持 UMD 模块导入。
sudo npm install qiniu4js --save
<script src="qiniu4js.js"></script>
import {UploaderBuilder} from 'Qiniu'
{UploaderBuilder} = require('Qiniu')
//构建 uploader 实例
let uploader = new Qiniu.UploaderBuilder()
.debug(false)//开启 debug ,默认 false
.retry(0)//设置重传次数,默认 0 ,不重传
.auto(true)//选中文件后立即上传,默认 true
.multiple(true)//是否支持多文件选中,默认 true
.accept(['.gif','.png','video/*'])//过滤文件,默认无,详细配置见 http://www.w3schools.com/tags/att_input_accept.asp
.tokenShare(true)//在一次上传队列中,是否分享 token,如果为 false 每上传一个文件都需要请求一次 Token ,默认 true
.tokenFunc(function (setToken,task) {
//token 获取函数, token 获取完成后,必须调用`setToken(token);`不然上传任务不会执行。
setTimeout(function () {
setToken("token");
}, 1000);
})
//任务拦截器
.interceptor({
//拦截任务,返回 true ,任务将会从任务队列中剔除,不会被上传
onIntercept: function (task) {
return task.file.size > 1024 * 1024;
},
//中断任务,返回 true ,任务队列将会在这里中断,不会执行上传操作。
onInterrupt: function (task) {
if (this.onIntercept(task)) {
alert("请上传小于 1m 的文件");
return true;
}
else {
return false;
}
},
}
//你可以添加多个任务拦截器
.interceptor({...})
.listener({
onReady(tasks) {
//选择上传文件确定后,该生命周期函数会被回调。
},onStart(tasks){
//开始上传
},onTaskGetKey(task){
//为每一个上传的文件指定 key,如果不指定则由七牛服务器自行处理
return "test.png";
},onTaskProgress: function (task) {
//每一个任务的上传进度,通过`task.progress`获取
console.log(task.progress);
},onTaskSuccess(task){
//一个任务上传成功后回调
},onTaskFail(task) {
//一个任务在经历重传后依然失败后回调此函数
},onTaskRetry(task) {
//开始重传
},onFinish(tasks){
//所有任务结束后回调,注意,结束不等于都成功,该函数会在所有 HTTP 上传请求响应后回调(包括重传请求)。
}}
}).build();
//如果 auto 设置为 false,则需要手动启动上传。
//uploader.start();
//由于安全原因, display:none 的 file input ,无法通过代码调用 click 方法,必须通过如下处理,让用户来实现 click ,从而打开文件选择窗口:
//你可以自行监听 HTML 元素的 click 事件,在回调函数内部打开文件选择窗口。你也可以使用 jQuery 监听,下面使用的是原生的 JavaScript 的方式。
button = document.getElementById('button');
button.addEventListener("click", function () {
uploader.chooseFile();
}
0.0.8 (2016-10-19)
0.0.7 (2016-10-19)
0.0.6 (2016-10-19)
0.0.5 (2016-10-19)
0.0.4 (2016-10-19)
0.0.3 (2016-10-19)
0.0.2 (2016-10-19)
知乎 : @面条
Github : @lsxiao
MIT
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.