更新时间：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，控制台出现 已拦截跨源请求：同源策略禁止读取位于
file:///C:/Users/wang/Desktop/upload/layui/font/iconfont.woff?v=240 的远程资源。
（原因：CORS 请求不是 http）。 ie，谷歌无此问题
但是我在html头部加
<meta http-equiv="Access-Control-Allow-Origin" content="*">
并未有效果，希望知道的大佬在评论区回复。
这个问题在真实生产环境中无此问题 这个问题在真实生产环境中无此问题 这个问题在真实生产环境中无此问题
重要的话说三遍，因为真实环境是http请求
此函数对上传进度进行实时监控
//创建监听函数
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及以上
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
讨论这个项目（18）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
upload.js报错
VM4061 upload.js:5 Uncaught ReferenceError: layui is not defined；
需要
$.getScript('https://www.layuicdn.com/layui/layui.js',function(){从新加载一下才可以，有没有同问的，这个怎么解决呢
-
目前是通过二进制文件传输，怎么使用formdata传输呢
传统的 会刷新页面
<form id= "uploadForm" action= "XXXX" method= "post" enctype ="multipart/form-data"> <input type="file" name="file"> <input type ="submit" value="上传"/> </form>
至于ajax这个就可以，不会刷新页面
这是我在演示上点网络截取的部分信息 不知道是不是你要的那样
accept: application/json, text/javascript, */*; q=0.01 accept-encoding: gzip, deflate, br accept-language: zh-CN,zh;q=0.9 content-length: 82261 content-type: multipart/form-data; boundary=----WebKitFormBoundaryB30Ar7AE4AP3Z8RB Form Data(file: (binary)): ------WebKitFormBoundaryB30Ar7AE4AP3Z8RB Content-Disposition: form-data; name="file"; filename="downfile2.torrent" Content-Type: application/octet-stream ------WebKitFormBoundaryB30Ar7AE4AP3Z8RB--
你可以在演示上传，F12选网络看下请求头和Request 参数是不是你要的
如果你需要表单和文件一同上传的话，设定为暂不上传，然后把上传按钮绑定为你的表单提交按钮就可以实现
至于后端处理
java演示：
public String uploadProgramme(MultipartFile file) {
...
File files = new File(realPath);
//判断file是否存在，如果不存在，自动创建
if (!files.exists()) {
files.mkdirs();
}
...
//利用文件读写将本地文件读写到服务器
try {
file.transferTo(files);
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
...
}
-
上传完成后返回值只能是200吗，我想返回一个有效路径提示我上传接口错误，请问这个判断是从哪判断的，用什么判断的？
url是你的真实接口路径,就不会弹出接口无效了 具体返回信息看你业务逻辑了
done : function(res, index, upload)｛
if (res == 200) {
//成功之后的操作
｝//上传成功 这里的200只是你自定义的返回状态码
｝假如你返回
{
"code": "0",
"date": "2020-10-21T14:40:16.155",
"msg": "成功",
"result": "data..."
}那你判断的就是res.code == 0 了，怎样判断具体看返回内容
-
为什么老是提示 请求上传接口出现异常
-
因为没有连接后台真实接口，具体的反馈信息你可以根据后台的返回状态码之类的自己写，请把url写成你们后台图片上传的测试接口
-
多文件上传没办法为每个文件提供不同的额外参数值吗
upload.render({
data: {} //可选项。额外的参数，如：{id: 123, abc: 'xxx'}
});
-
为什么总是提示上传失败，没有其他的错误提示信息么
-
因为没有连接后台真实接口，具体的反馈信息你可以根据后台的状态码之类的自己写
-
请问支持断点续传吗？
支持断点续传的一般是C/S,B/S是没办法支持断点续传的，如果是很大的文件或者视频文件的话，建议您选择其他插件，大文件上传的话一般使用并发分片上传的模式，flash文件流也可以，这样的话即使上传失败也不会重新上传整个文件，而且文件体积大、量比较多，上传的话还应该考虑md5校验，Web前端可使用百度的 webuploader H5大文件分片上传插件；
官网地址：
http://fex.baidu.com/webuploader/
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。采用大文件分片并发上传，极大的提高了文件上传效率。
分片与并发结合，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。
当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。(摘自WebUploader官网)
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
