https://github.com/lovefc/fcup2

一个轻巧的js类库,用于在网页端上传大文件,大图片,可以设置多个上传参数,提供了多种回调. 可以任意绑定id,自动生成上传表单,可以自定义文件头,其它参数,设置最大上传,最小上传,以及判断上传类型.
https://github.com/lovefc/fcup2

html5up upload uploading-large-files web-upload

Last synced: 2 months ago
JSON representation

一个轻巧的js类库,用于在网页端上传大文件,大图片,可以设置多个上传参数,提供了多种回调. 可以任意绑定id,自动生成上传表单,可以自定义文件头,其它参数,设置最大上传,最小上传,以及判断上传类型.

• Host: GitHub
• URL: https://github.com/lovefc/fcup2
• Owner: lovefc
• License: apache-2.0
• Created: 2020-02-05T05:12:56.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-06-05T14:24:26.000Z (over 2 years ago)
• Last Synced: 2024-10-30T06:37:36.362Z (3 months ago)
• Topics: html5up, upload, uploading-large-files, web-upload
• Language: JavaScript
• Size: 459 KB
• Stars: 21
• Watchers: 2
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
### 项目介绍

一个轻巧的js类库,用于在网页端上传大文件,大图片,可以设置多个上传参数,提供了多种回调.

可以任意绑定id,自动生成上传表单,可以自定义文件头,其它参数,设置最大上传,最小上传,以及判断上传类型.

现在已经支持断点续传,并且有详细的操作案例

官网：http://fcup.lovefc.cn

Gitee：https://gitee.com/lovefc/fcup2

Github：https://github.com/lovefc/fcup2

NODE打包使用案例: https://gitee.com/lovefc/webpack

![](/show.png)

### 使用教程

直接下载源码或者使用git克隆

备注:新版本的demo使用了sqlite数据库,注意php环境有没有sqlite扩展,另外上传目录要给读写权限

### 使用方法

```javascript

   // 上传案例2

   let up = new fcup({

      id: "upid", // 绑定id

      url: "server/php_db/upload.php", // url地址

	  

	  check_url: "server/php_db/check.php", // 检查上传url地址

      type: "jpg,png,jpeg,gif", // 限制上传类型，为空不限制

      shard_size: "0.005", // 每次分片大小，单位为M，默认1M

      min_size: '', // 最小文件上传M数，单位为M，默认为无

      max_size: "2", // 上传文件最大M数，单位为M，默认200M

      

	  // headers: {"version": "fcup-v2.0"}, // 附加的文件头,默认为null, 请注意指定header头时将不能进行跨域操作

	  

	  // apped_data: {}, //每次上传的附加数据

	  

      // 定义错误信息

      error_msg: {

         1000: "未找到上传id",

         1001: "类型不允许上传",

         1002: "上传文件过小",

         1003: "上传文件过大",

         1004: "上传请求超时"

      },

      

      // 错误提示

      error: (msg) => {

         alert(msg);

      },      

      // 初始化事件                

      start: () => {

         console.log('上传已准备就绪');

         Progress2(0);

      },

      // 等待上传事件，可以用来loading

      before_send: () => {

         console.log('等待请求中');

      },

      // 上传进度事件

      progress: (num, other) => {

         Progress2(num);

         console.log(num);

         console.log('上传进度' + num);

         console.log("上传类型" + other.type);

         console.log("已经上传" + other.current);

         console.log("剩余上传" + other.surplus);

         console.log("已用时间" + other.usetime);

         console.log("预计时间" + other.totaltime);

      },

	  

      // 检查地址回调,用于判断文件是否存在,类型,当前上传的片数等操作

      check_success: (res) => {

	  

         let data = res ? eval('(' + res + ')') : '';

		 

		 let status = data.status;

		 

         let url = data.url;

		 

		 let msg = data.message;

		 

		 // 错误提示

         if (status == 1 ) {

            alert(msg);

            return false;

         }

		 

		 // 已经上传

         if (status == 2) {

			alert('文件已存在');

            return false;

         }

         

		// 如果提供了这个参数,那么将进行断点上传的准备

		if(data.file_index){

           // 起始上传的切片要从1开始

		   let file_index = data.file_index ? parseInt(data.file_index) : 1;

           // 设置上传切片的起始位置		   

		   up.set_shard(file_index);

		}

		 

        // 如果接口没有错误，必须要返回true，才不会终止上传

         return true;

      },

	  

      // 上传成功回调，回调会根据切片循环，要终止上传循环，必须要return false，成功的情况下要始终返回true;

      success: (res) => {

         let data = res ? eval('(' + res + ')') : '';

         let url = data.url + "?" + Math.random();

		 

		 let file_index = data.file_index ? parseInt(data.file_index) : 1;

         if (data.status == 2) {

            alert('上传完成');

         }

         // 如果接口没有错误，必须要返回true，才不会终止上传循环

         return true;

      }

   });		

```

### 前端参数详细

| 参数 |类型| 空 | 默认 | 备注 |

|----    |-------    |--- |---|------      | 

|id | string | 否 | 无 |     dom的id        | 

|url |string | 否 | 无  |   上传到服务器的url  |

|check_url |string | 否 | 无  |   检查上传url地址  |

|type |string | 是  |  空 |  限制上传类型，多个用,号分割(不区分大小写),为空不限制  |

|shard_size    | int,float | 否   | 2   |     每次分片的大小,单位为M,因为要计算md5,所以如果条件允许,不要设定的太小     |

|min_size    | int,float | 是   | 空   |  上传文件的最小M数   |

|max_size    | int,float | 是   | 空   |  上传文件的最大M数   |

|headers |object   |是   | 空  |  每次上传附带的文件头,请注意指定header头时将不能进行跨域操作 |

|apped_data |object   |是   | 空  |  每次上传附带的其它参数,传递到后台  |

|timeout |int   |否   | 3000 |  ajax超时时间  |

|error_msg |object   |否   | object |  错误提示 | 

|start |function   |是   | fucntion |  实例化类后的开始事件  |

|before_send |function   |是   | fucntion |  等待上传事件  |

|progress |function   |是   | fucntion |  上传进度事件  |

|error |function   |是   | fucntion |  内部的错误提示函数  |

|check_success |function   |是   | fucntion |  检查地址回调,用于判断文件是否存在,类型,改变当前上传的片数等操作 |

|success |function   |是   | fucntion |  数据成功传递到后端的事件,这是一个循环事件 |

### 常用函数

| 函数名 | 说明 |

|----    |------      | 

|fcup.set_shard(file_index)|    设置当前的分片数起始数,用于断点上传时改变       | 

|fcup.cancel()|取消上传事件  |

|fcup.start_upload()|开始上传事件  |

### 后端参数详情

|参数名|注释|

|----    |------  |

|file_data |分段的文件|

|file_name |文件名称|

|file_total |文件的总片数|

|file_index |当前片数|

|file_md5 |文件的md5|

|file_size |文件的总大小|

|file_chunksize |当前切片的文件大小|

|file_suffix |文件的后缀名|

- 备注：以post的方式传递到后端

### 更新日志

2018/1/8 : 添加了对于接口返回结果的回调，添加了对于上传表单id的指定

2018/1/10 : 添加了node.js的上传接口，基于express框架(已丢弃)

2018/1/17 : 优化了分片异步处理,队列执行接口,修复细节

2018/5/02 : 添加了文件大小的判断,添加了对于文件md5的计算,添加了终止函数,传值到后台使用,优化细节部分

2019/5/21 : 分离了原来的进度动画，现在用户可以自定义自己的动画和按钮，分别提供了各种回调事件以便处理

2019/8/12 : 修复了获取md5值的bug，感谢Matty的提醒

2019/10/22: 修改了终止事件循环执行的bug

2020/01/05: 重新封装类库,优化性能,改掉了以前的bug 

2020/01/30: 优化了时间计算,添加了可自定义header头的功能

2020/02/01: 多实例化,可以在同一个页面添加多个上传功能

2020/04/16: 分离了文件判断和上传的操作,添加了断点续传功能

2020/11/29: 修复了跨域上传的bug,请注意指定header头时将不能进行跨域操作

2021/03/18: 添加了node上传案例,后端使用了fc-body插件来进行上传

2021/08/20: 修改上传大小值限定精度问题

2021/12/20: 规范了参数命名问题

2022/06/05: 修复等待事件,感谢liming的发现和帮助