项目作者: fenglixuelilili

项目描述 :
原生javascript自定义文件上传的库 支持Promise 支持自定义渲染过程 支持终止传输 面向对象 轻量级的
高级语言: JavaScript
项目地址: git://github.com/fenglixuelilili/upload.js.git
创建时间: 2020-08-28T04:10:06Z
项目社区:https://github.com/fenglixuelilili/upload.js

开源协议:

下载


自定义渲染上传过程的javascript文件上传工具库

不依赖任何第三方库 支持Promise 支持自定义渲染过程 支持终止传输 面向对象 轻量级的原生javascript函数库

基本使用

1.引入文件: upload.js (upload_fn.js为函数版本)

2.实例化: 对外暴露 Uploadfile类 实例化的时候传入input上传文件框对象

  1. let fileupload = new Uploadfile(document.querySelector('#file'))

3.调用上传:实例会有一个 upload 的方法,包含2个可选参数和1个必选参数  

采用必选置后的原则,必选参数永远放到函数的参数的最后一位

可选参数1:自定义渲染函数 会有三个重要的参数 为 progress 进度(百分制),speed(速度),Company(速度单位)

可选参数2:上传完成回调

必选参数3:对象 或者 字符串,当是字符串的时候则是上传路径,当是对象的时候,name属性为文件对象的name属性 url为上传地址 其他属性则是文件上传过程中其他的数据

  1. <!-- 直接调用 -->
  2. fileupload.upload('/upload').then(data=>{
  3. console.log(data)
  4. }).then(data=>{
  5. console.log(data)
  6. })

  1. 或者
  2. <!-- 使用配置对象 -->
  3. fileupload.upload({url:'/upload',name:'myfile'}).then(data=>{
  4. console.log(data)
  5. }).then(data=>{
  6. console.log(data)
  7. })

  1. 或者
  2. <!-- 使用自定义渲染上传进度 -->
  3. fileupload.upload((progress,speed,Company)=>{
  4. // 自定义渲染html
  5. console.log('自定义渲染html')
  6. render(progress,speed,Company)
  7. }
  8. ,'/upload').then(data=>{
  9. console.log(data)
  10. })

  1. 或者
  2. fileupload.upload((progress,speed,Company)=>{
  3. // 自定义渲染html
  4. console.log('自定义渲染html')
  5. render(progress,speed,Company)
  6. },
  7. ()=>{
  8. console.log('传输完成执行的回调')
  9. }
  10. ,'/upload').then(data=>{
  11. console.log(data)
  12. })

4.终止传输 使用实例上的stop方法 该方法依然支持传入可选参数 function 为停止上传之后的回调

  1. fileupload.stop(()=>{
  2. console.log('停止了')
  3. })

案例运行方法(需要node环境):

小结

菜鸟一个,大佬们多多批评指点 多谢了(给个start再走呗)