插件描述：这是一款流畅的H5文件上传插件，覆盖几乎所有的使用场景，支持上传前预览，多(单)文件上传自定义，支持实时进度条等，你可以按照你想要的方式自定义

更新时间：2021-05-30 16:15:41

更新说明：

1. 新增loading动画

2. fixed fileid问题

3. 更新配置参数

以下为默认参数，配置后将覆盖var defaultConfigs = {

easyId: '', //插件插入节点的Id，String类型

accept: '.jpg,.png,.pdf', //允许文件类型后缀名，逗号分隔，String类型

action: '', //上传文件地址，String类型     btnText: {  //按钮展示文字

select: '选择文件',

upload: '上传',: '删除',

cancel: '终止'

},

maxCount: 3, //插件单次添加文件的最大数量，Number类型

maxSize: 3, //允许上传文件的最大体积，单位M，Number类型

multiple: true, //是否开启多文件上传，Boolean类型

messageTime: 2000, //messageBox消息提示毫秒数，Number类型

responseType: 'text', //xhr的responseType格式，String类型

showSize: true, //是否展示文件体积，Boolean类型

showLoading: false, //是否展示上传loading动画，Boolean类型

statusText: {

//不同状态展示的提示文字，key为对应文件状态(不可修改)，value为展示文字

0: '允许上传', //文件大小验证合格后的初始状态

1: '即将上传', //等待上传队列执行到自己时的状态

2: '0%', //上传时刚发出xhr还没响应时的状态

3: '上传成功', //xhr响应&上传成功时的状态

4: '上传失败', //xhr响应&上传失败时的状态

5: '体积超出', //检测文件大小超出限定值时的状态

}, statusTextColor: {

//不同状态'提示文字'标签的className，key为对应文件状态(不可修改)，value为标签的className

0: 'normalcolor', //正常状态字体色的className

1: 'normalcolor', //正常状态字体色的className

2: 'normalcolor', //正常状态字体色的className

3: 'normalcolor', //正常状态字体色的className

4: 'failedcolor', //失败状态字体色的className

5: 'warncolor', //警告状态字体色的className

}, statusBg: {

//不同状态对应标签的className，key为对应文件状态(不可修改)，

value为标签的className

0: 'normalbg', //正常状态背景色的className

1: 'normalbg', //正常状态背景色的className

2: 'normalbg', //正常状态背景色的className

3: 'normalbg', //正常状态背景色的className

4: 'failedbg', //失败状态背景色的className

5: 'warnbg', //警告状态背景色的className

}, timeout: 0, //请求超时毫秒数，0表示永久，Number类型

withCredentials: true, //是否允许请求头自带cookie等证书，Boolean类型

setRequestHeader: null, //配置xhr请求头的方法

buildSendData: null, //配置xhr发送数据格式的方法，返回data

checkSuccessCode: null //检查成功状态码的方法，返回布尔值

};

更新时间：2021-05-19 02:19:10

更新说明：

1. 从底层开始重构，不再依赖其他类库；

2. 支持自由设置请求头

3. 支持自由设置发送数据格式如 FormData 或 base64

4. 支持自由配置请求成功状态码

5. css和结构分离，可以随意定制样式；

6. 支持多实例上传

7. 其他小惊喜...

更新时间：2019/4/29 上午10:54:46

更新说明：更新到版本V2.0.4，修复了校验文件大小问题

更新时间：2019/4/13 下午7:27:36

更新说明：更新到版本v2.0.2，修改了contentType默认配置

更新时间：2019/3/17 上午10:51:54

更新说明：升级到版本V2.0.2，修复取消上传后无法重新上传的问题

更新时间：2019/3/14 下午3:31:00

更新说明：easyUpload.jsV2.0以后升级更名为easyUploader.js

easyUploader一款简单易用H5上传插件，主要面向小文件，支持多文件上传，批量上传，以及混合上传# 支持- 文件类型可配置- 文件数量可配置- 文件允许大小可配置- 批量上传- 上传前预览- 实时进度条- base64上传- formData上传- 附带样式表可自行修改样式

使用说明页面head内引入插件样式文件mian.css

srcipt标签引入easyUploader.js或easyUploader.jq.js   -  easyUploader.jq.js相比easyUploader.js的区别是内置了一个jq库，项目内如已引用jq库，可选择没有内置jq的easyUploader.js

使用示例html>

easyUploader示例

html * { margin: 0;padding: 0; }

var uploader = easyUploader({

id: "uploader",

accept: '.jpg,.png',

action: 'https://jsonplaceholder.typicode.com/posts/',

dataFormat: 'formData',

maxCount: 10,

maxSize: 3,

multiple: true,

data: null,

beforeUpload: function(file, data, args) {

data.append('token', '387126b0-7b3e-4a2a-86ad-ae5c5edd0ae6TT'); //上传方式为formData时

// data.id = file.id; //上传方式为base64时

},

onChange: function(fileList) {

/* input选中时触发 */

},

onRemove: function(removedFiles, files) {

console.log('onRemove', deletedFiles);

},

onSuccess: function(res) {

console.log('onSuccess', res);

},

onError: function(err) {

console.log('onError', err);

},

});

var files = uploader.files; //通过实例的files熟悉可以访问上传文件

console.log(files);

参数配置defaultConfigs = {id: "", //渲染容器

id accept: '.jpg,.png', //上传类型

action: "", //自动上传地址

autoUpload: false, //是否开启自动上传

contentType: 'application/x-www-form-urlencoded', //同$.ajax参数，默认值为application/x-www-form-urlencoded

crossDomain: true, //是否允许跨域 data:

null, //上传配置参数

dataFormat: 'formData', //上传表单类型，有formData和base64两种

dataType: 'json', //同$.ajax，默认返回数据格式为json

headers: undefined, //上传的请求头部

maxCount: 3, //最大上传文件数

maxSize: 3, //最大上传文件体积，单位M

multiple: false, //是否开启多选上传

name: 'file', //上传的文件字段名

previewWidth: 70, //压缩预览图的宽度

processData: false, //同$.ajax参数，这里默认为false

successKey: 'code', //标识上传成功的key

successValue: 200, //标识上传成功对应的value

showAlert: true, //是否开启alert提示

timeout: 300000, //ajax请求超时时间，默认30秒

withCredentials: true, //是否支持发送 cookie 凭证信息

beforeUpload: null, //ajax上传前的钩子

onAlert: null, //alert时的钩子

onChange: null, //input

change的回调函数: null, //上传失败时的钩子

onRemove: null, //移除文件时的钩子

onSuccess: null, //上传成功时的钩子

}

版本信息当前最新版本为V2.0，相对于V1版本体积更小，性能更佳，配置也更加灵活，欢迎新老朋友与我交流，或者给以反馈(update at 2019-03-14)

更新时间：2018/1/18 上午12:58:39

更新说明：

修改：

1、增加okCode字段(匹配数据code，执行成功回调)

2、修改界面ui，如gif背景变透明，boder颜色加深等

easyUpload.js

试用过一些资源，发现无法满足项目业务需求，或者无法满足个人的免费要求。因此，我决定从第一行代码开始，来编写一个即免费又好用的玩意。它可以覆盖大部分应用场景，同时也必须高效、稳定、易配置。是的，正是出于这个动机，才有了你看到的这个小项目。个人水平有限，欢迎各位网友批评指正，也可与我联系交流(Email：funnyque@163.com； QQ：1016981640)

插件支持文件类型可配置

允许文件大小可配置

是否开启多文件上传可配置

多文件上传数可配置

支持样式自定义

支持单文件上传及删除

支持多文件一键上传及删除

支持实时展示上传进度条

支持上传前文件预览

文件说明

实际需要用到这里的文件可能只有：easyUpload.js

easy-upload.less

easy-upload.css

font/

img/

easyUpload.js是插件的主要文件；easy-upload.less便于对css修改；easy-upload.css是less预处理后编译文件，对less不熟悉可以直接修改它；font文件夹里有插件需要用到的字体库；img里有显示上传状态的gif；项目中其他文件则是为了便于你查看demo后加入的。当然，这个插件依赖于jq，调用插件之前需要先引入jq。关于插件的使用，你可以参考下面的使用说明，也可以直接查看demo.html内的示例，这样你可以更快的搞明白

使用说明

插件使用只需四步：

定义一个结构用于放入插件

引入easy-upload.css

引入jq及easyUpload.js

配置插件$('#easyContainer').easyUpload({

allowFileTypes: '*.jpg;*.doc;*.pdf',//允许上传文件类型，格式';*.doc;*.pdf'

allowFileSize: 100000,//允许上传文件大小(KB)

selectText: '选择文件',//选择文件按钮文案

multi: true,//是否允许多文件上传

multiNum: 5,//多文件上传时允许的文件数

showNote: true,//是否展示文件上传说明

note: '提示：最多上传5个文件，支持格式为doc、pdf、jpg',//文件上传说明

showPreview: true,//是否显示文件预览

url: '/api/file/upload',//上传文件地址

fileName: 'file',//文件filename配置参数

formParam: {

token: $.cookie('token_cookie')//不需要验证token时可以去掉

},//文件filename以外的配置参数，格式：{key1:value1,key2:value2}

timeout: 30000,//请求超时时间

successFunc: function(res) {

console.log('成功回调', res);

},//上传成功回调函数

errorFunc: function(res) {

console.log('失败回调', res);

},//上传失败回调函数

deleteFunc: function(res) {

console.log('删除回调', res);

}//删除文件回调函数

});