fcup.jsweb大文件分片上傳插件
### 項(xiàng)目介紹
一個(gè)輕巧的js類庫,用于在網(wǎng)頁端上傳大文件,大圖片,可以設(shè)置多個(gè)上傳參數(shù),提供了多種回調(diào).
可以任意綁定id,自動(dòng)生成上傳表單,可以自定義文件頭,其它參數(shù),設(shè)置最大上傳,最小上傳,以及判斷上傳類型.
官網(wǎng)地址：http://www.fcup.top
下載地址：https://gitee.com/lovefc/fcup2
### 安裝教程
直接下載源碼或者使用git克隆
### 使用方法
```javascript
// 上傳案例
let up = new fcup({
id: "upid", // 綁定id
url: "./php/file.php", // url地址
type: "jpg,png,jpeg,gif", // 限制上傳類型，為空不限制
shardsize: "0.01", // 每次分片大小，單位為M，默認(rèn)1M
minsize: '', // 最小文件上傳M數(shù)，單位為M，默認(rèn)為無
maxsize: "50", // 上傳文件最大M數(shù)，單位為M，默認(rèn)200M
// headers: {"version": "fcup-v2.0"}, // 附加的文件頭
// apped_data: {}, //每次上傳的附加數(shù)據(jù)
// 定義錯(cuò)誤信息
errormsg: {
1000: "未找到該上傳id",
1001: "類型不允許上傳",
1002: "上傳文件過小",
1003: "上傳文件過大",
1004: "請(qǐng)求超時(shí)"
},
// 開始事件
start: () => {
console.log('開始上傳');
},
// 等待上傳事件，可以用來loading
beforeSend: () => {
console.log('等待請(qǐng)求中');
},
// 上傳進(jìn)度事件
progress: (num, other) => {
console.log(num);
console.log('上傳進(jìn)度' + num);
console.log("上傳類型" + other.type);
// 以下僅作參考,并不是太準(zhǔn)確
console.log("已經(jīng)上傳" + other.current);
console.log("剩余上傳" + other.surplus);
console.log("已用時(shí)間" + other.usetime);
console.log("預(yù)計(jì)時(shí)間" + other.totaltime);
},
// 錯(cuò)誤提示
error: (msg) => {
alert(msg);
},
// 上傳成功回調(diào)，回調(diào)會(huì)根據(jù)切片循環(huán)，要終止上傳循環(huán)，必須要return false，成功的情況下要始終要返回true;
success: (res) => {
let data = res ? eval('(' + res + ')') : '';
let url = data.url + "?" + Math.random();
if (data.status == 2) {
alert('上傳完成');
}
if (data.status == 3) {
alert('已經(jīng)上傳過了');
return false;
}
// 如果接口沒有錯(cuò)誤，必須要返回true，才不會(huì)終止上傳循環(huán)
return true;
}
});
```
### 前端參數(shù)詳細(xì)
| 參數(shù) |類型| 空 | 默認(rèn) | 備注 |
|---- |------- |--- |---|------ |
|id | string | 否 | 無 | dom的id |
|url |string | 否 | 無 | 上傳到服務(wù)器的url |
|type |string | 是 | 空 | 限制上傳類型，多個(gè)用,號(hào)分割(不區(qū)分大小寫),為空不限制 |
|shardsize | int,float | 否 | 2 | 每次分片的大小,單位為M,因?yàn)橐?jì)算md5,所以如果條件允許,不要設(shè)定的太小 |
|minsize | int,float | 是 | 空 | 上傳文件的最小M數(shù) |
|maxsize | int,float | 是 | 空 | 上傳文件的最大M數(shù) |
|headers |object |是 | 空 | 每次上傳附帶的文件頭 |
|apped_data |object |是 | 空 | 每次上傳附帶的其它參數(shù),傳遞到后臺(tái) |
|timeout |int |否 | 3000 | ajax超時(shí)時(shí)間 |
|errormsg |object |否 | object | 錯(cuò)誤提示 |
|start |function |是 | fucntion | 實(shí)例化類后的開始事件 |
|beforeSend |function |是 | fucntion | 等待上傳事件 |
|progress |function |是 | fucntion | 上傳進(jìn)度事件 |
|error |function |是 | fucntion | 內(nèi)部的錯(cuò)誤提示函數(shù) |
|success |function |是 | fucntion | 數(shù)據(jù)成功傳遞到后端的事件,這是一個(gè)循環(huán)事件 |
### 后端參數(shù)詳情
|參數(shù)名|注釋|
|---- |------ |
|file_data |分段的文件|
|file_name |文件名稱|
|file_total |文件的總片數(shù)|
|file_index |當(dāng)前片數(shù)|
|file_md5 |文件的md5|
|file_size |文件的總大小|
|file_chunksize |當(dāng)前切片的文件大小|
|file_suffix |文件的后綴名|
- 備注：以post的方式傳遞到后端
### 更新日志
2018/1/8 : 添加了對(duì)于接口返回結(jié)果的回調(diào)，添加了對(duì)于上傳表單id的指定
2018/1/10 : 添加了node.js的上傳接口，基于express框架
2018/1/17 : 優(yōu)化了分片異步處理,隊(duì)列執(zhí)行接口,修復(fù)細(xì)節(jié)
2018/5/02 : 添加了文件大小的判斷,添加了對(duì)于文件md5的計(jì)算,添加了終止函數(shù),傳值到后臺(tái)使用,優(yōu)化細(xì)節(jié)部分
2019/5/21 : 分離了原來的進(jìn)度動(dòng)畫，現(xiàn)在用戶可以自定義自己的動(dòng)畫和按鈕，分別提供了各種回調(diào)事件以便處理
2019/8/12 : 修復(fù)了獲取md5值的bug，感謝Matty的提醒
2019/10/22: 修改了終止事件循環(huán)執(zhí)行的bug
2020/01/05: 重新封裝類庫,優(yōu)化性能,改掉了以前的bug
2020/01/30: 優(yōu)化了時(shí)間計(jì)算,添加了可自定義header頭的功能
2020/02/01: 多實(shí)例化,可以在同一個(gè)頁面添加多個(gè)上傳功能