%20(2).svg)
项目简介
easyUpload.js 是一款简单易用、可配置的 H5/Web 文件上传插件。支持多文件上传、批量上传、混合上传以及多实例上传，适用于各种 Web 文件上传场景。本介绍针对其 js 版本。
项目的主要特性和功能
- 支持灵活的文件配置，可自由设置允许上传的文件类型、数量和大小。
- 上传前可对文件进行预览。
- 能够展示上传的实时进度条。
- 支持批量上传和不同类型文件的混合上传。
- 可自由配置 base64 或 FormData 等数据格式，自由配置请求头，且 API 与原生 API 一致。
- 支持自由配置请求成功状态码。
- CSS 与结构分离，可自由定制样式。
- 由原生 js 编写，不依赖任何类库。
安装使用步骤
引入文件
在 HTML 页面内引入 easyUpload.min.js 和 easy_upload.min.css。生产环境建议使用 dist 文件夹内的压缩代码，二次开发测试可参考 src 文件夹内的源代码。
配置并初始化
使用 easyUpload 函数并传入配置对象来初始化插件。以下是一个配置示例：
js
easyUpload({
easyId: 'easy1',
action: 'https://jsonplaceholder.typicode.com/posts/',
accept: '.jpg,.png,.gif,.pdf,.docx',
maxSize: 3, // 单位 MB
showLoading: true,
setRequestHeader: function(xhr) {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
},
buildSendData: function(file) {
return null;
},
checkSuccessCode: function(xhr) {
if (/error/.test(xhr.responseText.toLowerCase())) {
return false;
} else {
return true;
}
},
uploadStart: function(self) {
console.log('上传开始，现在的队列是', self.files);
},
uploadEnd: function(self) {
console.log('上传完成了，现在的队列是', self.files);
}
});
详细的参数配置说明如下：
js
var defaultConfigs = {
easyId: '', // 插件插入节点的 Id，String 类型
accept: '.jpg,.png,.pdf', // 允许文件类型后缀名，逗号分隔，String 类型
action: '', // 上传文件地址，String 类型
btnText: {
select: '选择文件',
upload: '上传',
delete: '删除',
cancel: '终止'
},
maxCount: 3, // 插件单次添加文件的最大数量，Number 类型
maxSize: 3, // 允许上传文件的最大体积，单位 MB，Number 类型
multiple: true, // 是否开启多文件上传，Boolean 类型
messageTime: 2000, // messageBox 消息提示毫秒数，Number 类型
responseType: 'text', // xhr 的 responseType 格式，String 类型
showSize: true, // 是否展示文件体积，Boolean 类型
showLoading: false, // 是否展示上传 loading 动画，Boolean 类型
statusText: {
0: '允许上传',
1: '即将上传',
2: '0%',
3: '上传成功',
4: '上传失败',
5: '体积超出'
},
statusTextColor: {
0: 'normalcolor',
1: 'normalcolor',
2: 'normalcolor',
3: 'normalcolor',
4: 'failedcolor',
5: 'warncolor'
},
statusBg: {
0: 'normalbg',
1: 'normalbg',
2: 'normalbg',
3: 'normalbg',
4: 'failedbg',
5: 'warnbg'
},
timeout: 0, // 请求超时毫秒数，0 表示永久，Number 类型
withCredentials: true, // 是否允许请求头自带 cookie 等证书，Boolean 类型
setRequestHeader: null, // 配置 xhr 请求头的方法
buildSendData: null, // 配置 xhr 发送数据格式的方法，返回 data
checkSuccessCode: null, // 检查成功状态码的方法，返回布尔值，默认返回 true
uploadStart: null, // 每个文件队列上传前的回调函数，传入参数 'self' 是当前 easyUpload 实例，可通过 self.files 查看队列文件
uploadEnd: null // 每个文件队列上传完成后的回调函数，传入参数 'self' 是当前 easyUpload 实例，可通过 self.files 查看队列文件
};
重新配置后将覆盖默认配置。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】