不依赖任何第三方库 支持Promise 支持自定义渲染过程 支持终止传输 面向对象 轻量级的原生javascript函数库
1.引入文件： upload.js (upload_fn.js为函数版本)
2.实例化： 对外暴露 Uploadfile类 实例化的时候传入input上传文件框对象
let fileupload = new Uploadfile(document.querySelector('#file'))
3.调用上传：实例会有一个 upload 的方法，包含2个可选参数和1个必选参数
采用必选置后的原则，必选参数永远放到函数的参数的最后一位
可选参数1：自定义渲染函数 会有三个重要的参数 为 progress 进度(百分制),speed(速度),Company(速度单位)
可选参数2：上传完成回调
必选参数3：对象 或者 字符串，当是字符串的时候则是上传路径，当是对象的时候，name属性为文件对象的name属性 url为上传地址 其他属性则是文件上传过程中其他的数据
<!-- 直接调用 -->
fileupload.upload('/upload').then(data=>{
console.log(data)
}).then(data=>{
console.log(data)
})
或者
<!-- 使用配置对象 -->
fileupload.upload({url:'/upload',name:'myfile'}).then(data=>{
console.log(data)
}).then(data=>{
console.log(data)
})
或者
<!-- 使用自定义渲染上传进度 -->
fileupload.upload((progress,speed,Company)=>{
// 自定义渲染html
console.log('自定义渲染html')
render(progress,speed,Company)
}
,'/upload').then(data=>{
console.log(data)
})
或者
fileupload.upload((progress,speed,Company)=>{
// 自定义渲染html
console.log('自定义渲染html')
render(progress,speed,Company)
},
()=>{
console.log('传输完成执行的回调')
}
,'/upload').then(data=>{
console.log(data)
})
4.终止传输 使用实例上的stop方法 该方法依然支持传入可选参数 function 为停止上传之后的回调
fileupload.stop(()=>{
console.log('停止了')
})
- 1.进入example目录
- 2.下载依赖 npm i
- 3.启动 node index
- 4.访问 http://localhost:8080/
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent