FCUP-大文件切片上传js插件
<h3>项目介绍</h3>
<p>一个轻巧的js类库,用于在网页端上传大文件,大图片,可以设置多个上传参数,提供了多种回调.
可以任意绑定id,自动生成上传表单,可以自定义文件头,其它参数,设置最大上传,最小上传,以及判断上传类型.
现在已经支持断点续传,并且有详细的操作案例</p>
<p>官网:<a href="http://fcup.lovefc.cn">http://fcup.lovefc.cn</a></p>
<p>Gitee:<a href="https://gitee.com/lovefc/fcup2">https://gitee.com/lovefc/fcup2</a></p>
<p>Github:<a href="https://github.com/lovefc/fcup2">https://github.com/lovefc/fcup2</a></p>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/20f40338081c1ea3b3a132955340c2f0?showdoc=.jpg" alt="" /></p>
<h3>使用教程</h3>
<p>直接下载源码或者使用git克隆</p>
<p>备注:新版本的demo使用了sqlite数据库,注意php环境有没有sqlite扩展,另外上传目录要给读写权限</p>
<h3>使用方法</h3>
<pre><code class="language-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;
}
}); </code></pre>
<h3>前端参数详细</h3>
<table>
<thead>
<tr>
<th>参数</th>
<th>类型</th>
<th>空</th>
<th>默认</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>string</td>
<td>否</td>
<td>无</td>
<td>dom的id</td>
</tr>
<tr>
<td>url</td>
<td>string</td>
<td>否</td>
<td>无</td>
<td>上传到服务器的url</td>
</tr>
<tr>
<td>check_url</td>
<td>string</td>
<td>否</td>
<td>无</td>
<td>检查上传url地址</td>
</tr>
<tr>
<td>type</td>
<td>string</td>
<td>是</td>
<td>空</td>
<td>限制上传类型,多个用,号分割(不区分大小写),为空不限制</td>
</tr>
<tr>
<td>shard_size</td>
<td>int,float</td>
<td>否</td>
<td>2</td>
<td>每次分片的大小,单位为M,因为要计算md5,所以如果条件允许,不要设定的太小</td>
</tr>
<tr>
<td>min_size</td>
<td>int,float</td>
<td>是</td>
<td>空</td>
<td>上传文件的最小M数</td>
</tr>
<tr>
<td>max_size</td>
<td>int,float</td>
<td>是</td>
<td>空</td>
<td>上传文件的最大M数</td>
</tr>
<tr>
<td>headers</td>
<td>object</td>
<td>是</td>
<td>空</td>
<td>每次上传附带的文件头,请注意指定header头时将不能进行跨域操作</td>
</tr>
<tr>
<td>apped_data</td>
<td>object</td>
<td>是</td>
<td>空</td>
<td>每次上传附带的其它参数,传递到后台</td>
</tr>
<tr>
<td>timeout</td>
<td>int</td>
<td>否</td>
<td>3000</td>
<td>ajax超时时间</td>
</tr>
<tr>
<td>error_msg</td>
<td>object</td>
<td>否</td>
<td>object</td>
<td>错误提示</td>
</tr>
<tr>
<td>start</td>
<td>function</td>
<td>是</td>
<td>fucntion</td>
<td>实例化类后的开始事件</td>
</tr>
<tr>
<td>before_send</td>
<td>function</td>
<td>是</td>
<td>fucntion</td>
<td>等待上传事件</td>
</tr>
<tr>
<td>progress</td>
<td>function</td>
<td>是</td>
<td>fucntion</td>
<td>上传进度事件</td>
</tr>
<tr>
<td>error</td>
<td>function</td>
<td>是</td>
<td>fucntion</td>
<td>内部的错误提示函数</td>
</tr>
<tr>
<td>check_success</td>
<td>function</td>
<td>是</td>
<td>fucntion</td>
<td>检查地址回调,用于判断文件是否存在,类型,改变当前上传的片数等操作</td>
</tr>
<tr>
<td>success</td>
<td>function</td>
<td>是</td>
<td>fucntion</td>
<td>数据成功传递到后端的事件,这是一个循环事件</td>
</tr>
</tbody>
</table>
<h3>常用函数</h3>
<table>
<thead>
<tr>
<th>函数名</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>fcup.set_shard(file_index)</td>
<td>设置当前的分片数起始数,用于断点上传时改变</td>
</tr>
<tr>
<td>fcup.cancel()</td>
<td>取消上传事件</td>
</tr>
<tr>
<td>fcup.start_upload()</td>
<td>开始上传事件</td>
</tr>
</tbody>
</table>
<h3>后端参数详情</h3>
<table>
<thead>
<tr>
<th>参数名</th>
<th>注释</th>
</tr>
</thead>
<tbody>
<tr>
<td>file_data</td>
<td>分段的文件</td>
</tr>
<tr>
<td>file_name</td>
<td>文件名称</td>
</tr>
<tr>
<td>file_total</td>
<td>文件的总片数</td>
</tr>
<tr>
<td>file_index</td>
<td>当前片数</td>
</tr>
<tr>
<td>file_md5</td>
<td>文件的md5</td>
</tr>
<tr>
<td>file_size</td>
<td>文件的总大小</td>
</tr>
<tr>
<td>file_chunksize</td>
<td>当前切片的文件大小</td>
</tr>
<tr>
<td>file_suffix</td>
<td>文件的后缀名</td>
</tr>
</tbody>
</table>
<ul>
<li>备注:以post的方式传递到后端</li>
</ul>
<h3>更新日志</h3>
<p>2018/1/8 : 添加了对于接口返回结果的回调,添加了对于上传表单id的指定</p>
<p>2018/1/10 : 添加了node.js的上传接口,基于express框架(已丢弃)</p>
<p>2018/1/17 : 优化了分片异步处理,队列执行接口,修复细节</p>
<p>2018/5/02 : 添加了文件大小的判断,添加了对于文件md5的计算,添加了终止函数,传值到后台使用,优化细节部分</p>
<p>2019/5/21 : 分离了原来的进度动画,现在用户可以自定义自己的动画和按钮,分别提供了各种回调事件以便处理</p>
<p>2019/8/12 : 修复了获取md5值的bug,感谢Matty的提醒</p>
<p>2019/10/22: 修改了终止事件循环执行的bug</p>
<p>2020/01/05: 重新封装类库,优化性能,改掉了以前的bug </p>
<p>2020/01/30: 优化了时间计算,添加了可自定义header头的功能</p>
<p>2020/02/01: 多实例化,可以在同一个页面添加多个上传功能</p>
<p>2020/04/16: 分离了文件判断和上传的操作,添加了断点续传功能</p>
<p>2020/11/29: 修复了跨域上传的bug,请注意指定header头时将不能进行跨域操作</p>
<p>2021/03/18: 添加了node上传案例,后端使用了fc-body插件来进行上传</p>
<p>2021/08/20: 修改上传大小值限定精度问题</p>
<p>2021/12/20: 规范了参数命名</p>