### 项目介绍
一个轻巧的js类库,用于在网页端上传大文件,大图片,可以设置多个上传参数,提供了多种回调.
可以任意绑定id,自动生成上传表单,可以自定义文件头,其它参数,设置最大上传,最小上传,以及判断上传类型.
官网地址: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,默认1M
minsize: '', // 最小文件上传M数,单位为M,默认为无
maxsize: "50", // 上传文件最大M数,单位为M,默认200M
// headers: {"version": "fcup-v2.0"}, // 附加的文件头
// apped_data: {}, //每次上传的附加数据
// 定义错误信息
errormsg: {
1000: "未找到该上传id",
1001: "类型不允许上传",
1002: "上传文件过小",
1003: "上传文件过大",
1004: "请求超时"
},
// 开始事件
start: () => {
console.log('开始上传');
},
// 等待上传事件,可以用来loading
beforeSend: () => {
console.log('等待请求中');
},
// 上传进度事件
progress: (num, other) => {
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);
},
// 错误提示
error: (msg) => {
alert(msg);
},
// 上传成功回调,回调会根据切片循环,要终止上传循环,必须要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('已经上传过了');
return false;
}
// 如果接口没有错误,必须要返回true,才不会终止上传循环
return true;
}
});
```
### 前端参数详细
| 参数 |类型| 空 | 默认 | 备注 |
|---- |------- |--- |---|------ |
|id | string | 否 | 无 | dom的id |
|url |string | 否 | 无 | 上传到服务器的url |
|type |string | 是 | 空 | 限制上传类型,多个用,号分割(不区分大小写),为空不限制 |
|shardsize | int,float | 否 | 2 | 每次分片的大小,单位为M,因为要计算md5,所以如果条件允许,不要设定的太小 |
|minsize | int,float | 是 | 空 | 上传文件的最小M数 |
|maxsize | int,float | 是 | 空 | 上传文件的最大M数 |
|headers |object |是 | 空 | 每次上传附带的文件头 |
|apped_data |object |是 | 空 | 每次上传附带的其它参数,传递到后台 |
|timeout |int |否 | 3000 | ajax超时时间 |
|errormsg |object |否 | object | 错误提示 |
|start |function |是 | fucntion | 实例化类后的开始事件 |
|beforeSend |function |是 | fucntion | 等待上传事件 |
|progress |function |是 | fucntion | 上传进度事件 |
|error |function |是 | fucntion | 内部的错误提示函数 |
|success |function |是 | fucntion | 数据成功传递到后端的事件,这是一个循环事件 |
### 后端参数详情
|参数名|注释|
|---- |------ |
|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: 多实例化,可以在同一个页面添加多个上传功能
使用方法 $.fcup({ upId: 'upid', //上传dom的id upShardSize: '1', //切片大小,(单次上传最大值)单位M,默认2M upMaxSize: '20', //上传文件大小,单位M,不设置不限制 upUrl: './php/file.php', //文件上传接口 upType: 'jpg,png,jpeg,gif', //上传类型检测,用,号分割 //接口
今天项目中要用到,所以弄了下,看到有朋友需要现在把实例分享出来! Minify请百度下载, 更多资料请访问: http://www.dahuzhi.com/ 安装说明: (1) 压缩包内的Minify文件夹复制到/ThinkPHP/Library/Vendor文件夹下 (2) MinConfroller.class.php 文件 复制到你的项目控制器总 (3) 参考MinConfroller.cl
1.图片轮播基础之缓速轮播 ◆使用封装的缓慢速动画来DIY滑动轮播图,也就是鼠标移动到123456这些数字上后,图片以缓慢速滑动的方式进行切换。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用封装的缓速动画制作滑动轮播图</title> <style type="text/cs
本文向大家介绍Node.js + express实现上传大文件的方法分析【图片、文本文件】,包括了Node.js + express实现上传大文件的方法分析【图片、文本文件】的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Node.js + express实现上传大文件的方法。分享给大家供大家参考,具体如下: 对于大文件的上传我们首先要引入一个叫做 multer 的库: 关于这个库,大家可
本文向大家介绍js实现分割上传大文件,包括了js实现分割上传大文件的使用技巧和注意事项,需要的朋友参考一下 本文实例介绍了js上传文件操作,分享给大家供大家参考,具体内容如下 file.php: 1 运行: 2 选择2G文件测试: 3 完成并正常播放: 以上就是本文的全部内容,希望对大家的学习有所帮助。
本文向大家介绍jquery.uploadifive插件怎么解决上传限制图片或文件大小问题,包括了jquery.uploadifive插件怎么解决上传限制图片或文件大小问题的使用技巧和注意事项,需要的朋友参考一下 jQuery.uploadifive插件可以很好的解决上传限制图片或文件大小问题,具体方法如下所示: 插件是可以用 但遇到问题如何提示是否超过限制呢 没办法研究插件js 发现网上给的
在Android中使用OKHTTP以多部分方式上传单个大文件(更具体地说,上传到s3)时,我有什么选择?
我想将文件上载到minio文件容器 较小的文件按预期使用此代码: 我需要为要上传的minio服务提供一个。 较小的文件按预期工作(将存储到容器中)。但是较大的文件(在我的测试中为12 MB)不起作用。 我得到了这个例外:
本文向大家介绍asp.net文件上传解决方案(图片上传、单文件上传、多文件上传、检查文件类型),包括了asp.net文件上传解决方案(图片上传、单文件上传、多文件上传、检查文件类型)的使用技巧和注意事项,需要的朋友参考一下 小编之前也介绍了许多ASP.NET文件上传的解决案例,今天来个asp.net文件上传大集合。 1 使用标准HTML来进行图片上传 前台代码: 后台代码: 2 单文件上传 这是最
分片上传 分片上传提供一个将Object拆分成若干个Part进行上传的功能。每个Part是Object数据中连续的一部分。所有Part可以独立且以任何顺序进行上传。任何Part上传失败后,可以单独进行重传,且不影响已经成功上传的Part。所有分片都上传后,FDS对这些Part进行组装,然后用户可以像普通Object一样进行访问。通常,如果Object大于100MB,可以考虑使用分片上传。 分片上传
本文向大家介绍PHP文件上传问题汇总(文件大小检测、大文件上传处理),包括了PHP文件上传问题汇总(文件大小检测、大文件上传处理)的使用技巧和注意事项,需要的朋友参考一下 由于涉及到本地和服务器两方面的安全问题,所以基于input type="file"形式的页面文件上传一直处于一个很尴尬的位置。一方面,用户不希望隐私泄露,所以浏览器无法对用户在上传时选择的文件做有效的判 断。另一方面,为了服务器