插件描述：基于layui的文件上传，支持支持实时进度条，拖拽上传，单文件，多文件上传，因为大多参数支持在ie89下使用，所以推荐ie10+，另外url一定要填后台真实上传路径测试
更新时间：2020-07-15 20:52:00
更新说明：修复某些问题，改进布局
更新时间：2019/7/25 上午11:02:11
更新说明：统一tips层格式，否则由于格式未统一，控制台可能会显示top.layer is not a function
发布时间：2019-07-22 09:42:03
在本地测试时候，火狐上传图标会显示错误，因为cors没有设置Access-Control-Allow-Origin，控制台出现 已拦截跨源请求：同源策略禁止读取位于
（原因：CORS 请求不是 http）。 ie，谷歌无此问题
但是我在html头部加
1 | <meta http-equiv="Access-Control-Allow-Origin" content="*"> |
并未有效果，希望知道的大佬在评论区回复。
1 2 3 | 这个问题在真实生产环境中无此问题这个问题在真实生产环境中无此问题这个问题在真实生产环境中无此问题 |
重要的话说三遍，因为真实环境是http请求
此函数对上传进度进行实时监控
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //创建监听函数var xhrOnProgress = function(fun) { xhrOnProgress.onprogress = fun; //绑定监听 //使用闭包实现监听绑 return function() { //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象 var xhr = $.ajaxSettings.xhr(); //判断监听函数是否为函数 if (typeof xhrOnProgress.onprogress !== 'function') return xhr; //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去 if (xhrOnProgress.onprogress && xhr.upload) { xhr.upload.onprogress = xhrOnProgress.onprogress; } return xhr; }} |
js里面写的实例是单图片的上传 关于多文件的相关内容已被注释说明，请根据个人需要调试
js里面的url必须为后台真实上传接口，方可进行测试
此组件支持ie8/ie9,但是大多数参数并不支持，所以推荐ie10及以上
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | elem: '#upload', //绑定元素 url: 'api/upload', //上传接口 exts: 'jpg|png|jpeg', //限定上传类型 //accept: images,//指定允许上传时校验的文件类型 images（图片）、file（所有文件）、video（视频）、audio（音频） acceptMime: 'image/jpg, image/png, image/jpeg', //只筛选上述类型图片 //number： '0',//0为不限制上传数量 xhr: xhrOnProgress, //data: {}, //可选项 额外的参数，如：{id: 123, abc: 'xxx'} //multiple: true,// 开启多文件上传 //drag:true, //是否允许拖拽上传 size: 1024 * 3, //为0为不限制大小 //监听xhr进度，并返回给进度条 progress: function(value) { //上传进度回调 value进度值 element.progress('upload_progress', value + '%') //设置页面进度条 }, before: function(obj) { //开始上传时候让进度条去除隐藏状态 $("#upload_progress").removeClass("layui-hide"); //或者设置loading //top.layer.load(1); //去除方法为 top.layer.close('loading'); 或者 top.layer.closeAll('loading'); },//auto: false, //选择文件后不自动上传 默认值为true//bindAction: '#testListAction', //指向一个按钮触发上传 |
........具体请查看js
另外因为为了支持实时进度条，更改了layui的js源码，所以不要替换该文件的layui
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery多功能网页键盘插件
- 下一个特效： Three图片变形全屏放大动画特效