<form method="post" action="?" οnsubmit="return check();"> <div> <div> <img src="https://www.jb51.net/{DT_PATH}member/images/addbanner.png"> </div> <input type="hidden"> <input type="hidden"> <input type="hidden"> </div> <span>Max. 3 attachements. Max. 3MB for each image.</span> <div>Submit</div> <input type="submit"/> </form>
JS部分:
//添加图片 layui.use('upload', function() { var upload = layui.upload;//得到upload对象 var frequency = 0;//记录上传成功的个数 //多文件列表示例 var demoListView = $('.comment-imgbox.refund-img #addImg'), uploadListIns = upload.render({ //执行实例 elem: '#addImg',//绑定文件上传的元素 url: '../upload.php', multiple: true, number: 3,//允许上传的数量 auto: false, bindAction: '#comment-btn',//指向一个按钮触发上传 size:'3072',//尺寸 accept: "images",//指定允许上传时校验的文件类型 acceptMime:'image/*',只显示图片文件 exts:"jpg|png|gif|jpeg",//允许后缀 drag:"false",//是否文件拖拽上传 data:{width:400,height:400},//上传接口的额外参数 choose: function(obj) { //选择文件后的回调函数 var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列 //如果图片3个，addImg隐藏 //假如项目只能传3个图片 if(Object.keys(files).length == 3){ $("#addImg").hide(); } //读取本地文件 如果是多文件，则会遍历。(不支持ie8/9) console.log(index); //得到文件索引console.log(file); //得到文件对象console.log(result); //得到文件base64编码，比如图片//obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用 obj.preview(function(index, file, result) { //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用 var div = $(['<div>', '<img src="' + result + '">', '<img src="https://www.jb51.net/member/images/close.png">', '</div>'].join('')); //删除列表中对应的文件 div.find('.refund-img-close').on('click', function() { delete files[index]; //删除对应的文件 div.remove(); uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选 $("#addImg").show(); }); demoListView.before(div); }); }, before:function(){ //obj参数包含的信息，跟 choose回调完全一致如果带参 修改了layui js的before方法 return confirm("Did you confirm submitting this review? Comments scores and content will not be changeable after submission');"); //为了可以让客户在点击确定是时候有2个选择 }, done: function(res) { //上传成功 frequency++; $("#proImg"+frequency).val(res);//隐藏域表单赋值 alert(11); //当节点与上传成功一致时 if($(".refund-img .exist").length == frequency){ $("#submitForm").trigger("click");//提交表单 } }, error: function(res, index, upload) { Dtoast("Failed to upload picture"); } }) });
部分CSS:
.refund-img{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 30px; } .refund-img-item{ width: 30%; position: relative; } .refund-img-item:nth-child(2){ margin: 0 5%; } .addRefundimg{ border: 1px dashed #BFBFBF; } .refund-img-item img.proimg{ width: 100%; } .refund-img-item input[type=file]{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; outline: none; border: none; opacity: 0; } .refund-img-close{ position: absolute; width: 20px; top: 0; right: 0; padding-right: 5px; padding-top: 5px; /*display: none;*/ } .addRefundimg .refund-img-close{ /*display: none;*/ } .refund-img-prompt{ display: block; margin-top: 5px; margin-bottom: 3px; } .refund-submit{ display: block; text-align: center; height: 40px; line-height: 40px; width: 98%; background-color: #fc6900; color: #fff; font-size: 16px; border: none; outline: none; margin-top: 8px; margin-bottom: 20px; } .comment-btn{ width: 96%; background-color: #fc6900; color: #fff; height: 36px; text-align: center; line-height: 36px; display: block; outline: none; border: none; margin-top: 30px; }
我用的layui版本是layui2.2.5 它这个默认不支持阻止图片上传的，所以需要改动框架的upload.js,
改动前 （查找before快速定位）:
y=function(){return"choose"===t?l.choose&&l.choose(g):(l.before&&l.before(g),a.ie?a.ie>9?u():c():void u())};
降上面代码稍作修改 改为以下:
if("choose"===t){return l.choose&&l.choose(g)}; if(l.before&&l.before(g)){return false}; return (a.ie?a.ie>9?u():c():void u());