更新时间：2021-05-30 16:15:41
更新说明：
1. 新增loading动画
2. fixed fileid问题
3. 更新配置参数
以下为默认参数，配置后将覆盖
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 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
使用示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>easyUploader示例</title> <link rel="stylesheet" href="./main.css"> <style> html * { margin: 0;padding: 0; } </style></head><body> <div id="uploader"></div> <script src="./easyUploader.jq.js"></scriptt> <script> var uploader = easyUploader({ id: "uploader", accept: '.jpg,.png', action: '/', 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); </script></body></html> |
参数配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 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）
插件支持
文件类型可配置
允许文件大小可配置
是否开启多文件上传可配置
多文件上传数可配置
支持样式自定义
支持单文件上传及删除
支持多文件一键上传及删除
支持实时展示上传进度条
支持上传前文件预览
文件说明
实际需要用到这里的文件可能只有：
1 2 3 4 5 | easyUpload.jseasy-upload.lesseasy-upload.cssfont/img/ |
easyUpload.js是插件的主要文件；easy-upload.less便于对css修改；easy-upload.css是less预处理后编译文件，对less不熟悉可以直接修改它；font文件夹里有插件需要用到的字体库；img里有显示上传状态的gif；项目中其他文件则是为了便于你查看demo后加入的。当然，这个插件依赖于jq，调用插件之前需要先引入jq。关于插件的使用，你可以参考下面的使用说明，也可以直接查看demo.html内的示例，这样你可以更快的搞明白
使用说明
插件使用只需四步：
定义一个结构用于放入插件
1 | <div id="easyContainer"></div> |
引入easy-upload.css
1 | <link rel="stylesheet" href="easy-upload.css"> |
引入jq及easyUpload.js
1 2 | <script src="vendor/jquery.cookie-1.4.1.min.js"></script><script src="easyUpload.js"></script> |
配置插件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | $('#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); }//删除文件回调函数}); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 简易的jQuery无缝滚动（原创）
- 下一个特效： jquery弹出模态框图片缩放、旋转、切换（原创）