说明：这是一个流畅的H5文件上传插件，涵盖了大多数使用场景。 支持上传前预览、多(单)文件上传自定义、实时进度条等，可根据需要进行自定义
更新时间： 2021-05-3016:15:41
更新说明：
添加加载动画
2 .固定字段问题
3 .更新配置参数
以下为默认参数，配置后为vardefaultConfigs={
easyId: '、//插件插入节点的Id、字符串类型
允许accept:'.jpg、 png、 pdf '、//文件类型的扩展名、逗号分隔和字符串类型
action: '、//上传文件的地址、字符串类型btnText:{//按钮显示字符
选择：“选择文件”、
upload: '上传'， '删除'，
cancel: '退出'
(，
maxCount:3，//插件一次添加的最大文件数，Number类型
maxSize:3，//可上传文件的最大大小、单位m、Number类型
multiple:true，//是否打开和上传多个文件，布尔类型
消息时间：2000，//messageBox消息提示毫秒数，编号类型
响应类型： '文本'，//xhr的响应类型格式，字符串类型
是否显示showSize:true，//文件的体积，布尔型
是否显示加载：假，加载视频上传，布尔类型
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: '故障颜色'，//失败字体颜色的className
5:'warncolor '，//警告状态字体颜色的className
、statusBg:{
//不同的状态对应于标签的className，key对应于文件的状态(不可修改)，
value是标签的类名称
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 )，布尔类型
如何配置setRequestHeader:null，//xhr请求标头
如何设置buildSendData:null，//xhr发送数据格式，返回data
检查checkSuccessCode:null//成功状态代码的方法。 返回布尔值
(；
更新时间： 2021-05-1902:19:10
更新说明：
1 .从底层重建，不再依赖其他类库
2 .自由设置请求头支持
支持自由设置发送数据格式，如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);
}//删除文件回调函数
});