文地址:https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
原文作者:Lydia Hallie
译者:夜尽天明
转发链接:https://mp.weixin.qq.com/s/uPgvp1wULIck2yKAqNLeLQ
HTML基本结构: <form class="layui-form" action="" id="feedBackForm"> <div class="layui-form-item"> <!--表单内容--> </div> <!--图片上传--> <div class="layui-upload feedback-padding"> <button type="button" class="layui-btn" id="selectImg">选择图片</button> <input type="text" class="layui-hide" name=""> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> 预览图: <div id="previewImg" class="layui-clear feedback-overflow"> </div> </blockquote> </div> <div class="layui-form-item"> <div class="feedback-block"> <button id="submitBtn" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button> </div> </div> </form>
JavaScript基本内容: 1、多图片上传、预览 //多图片上传 uploadList = upload.render({ elem: '#selectImg' ,url: "/add.do" ,accept: 'images' ,acceptMime: 'image/*' ,method: 'post' ,multiple: true ,auto: false ,choose: function(obj){ files = obj.pushFile(); //将每次选择的文件追加到文件队列 //图像预览,如果是多文件,会逐个添加。(不支持ie8/9) obj.preview(function(index, file, result){ var imgBox = document.createElement("div");//预览图、删除预览图按钮容器 var imgDelete = document.createElement("div");//删除预览图按钮 var imgobj = new Image(); //创建新img对象 imgBox.style.float = 'left'; imgBox.style.position = 'relative'; imgDelete.setAttribute('class',"feedback-delete-btn layui-icon layui-icon-close-fill"); imgDelete.setAttribute ('title','删除'); imgobj.src = result; //指定数据源 imgobj['layer-src'] = result; imgobj.alt = file.name; imgobj.className = 'layui-upload-img'; imgobj['layer-index'] = index; imgBox.appendChild(imgobj); imgBox.appendChild(imgDelete); imgDelete.onclick = function () { // 为预览图的删除按钮绑定删除事件 delete files[index]; //删除对应的文件 document.getElementById("previewImg").removeChild(imgBox);//从预览区域移除 uploadList.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选 } document.getElementById("previewImg").appendChild(imgBox); //添加到预览区域 //photos 图片层 layer.photos({//此处目前存在bug 导致单击后无法在弹层中打开预览 下面会讲解如何处理 photos: '#previewImg' ,anim: 0 }); }); } });
2、提交 //监听提交 form.on('submit(demo1)', function(data){ var myForm = document.getElementById("feedBackForm"); var formData = new FormData(myForm); //循环 files(第一步choose回调中储存的对象) 逐条插入到formData for (var i in files) { formData.append("files",files[i]);//此处的files为上传接口参数名 } $.ajax({ url: "/add.do", type: "POST", data: formData, async: false, contentType: false, processData: false, error: function () { layer.msg('网络超时',{icon:2}); }, success: function (data) { layer.msg('成功',{icon:1}); } }) return false; });
3、步骤一中 layer.photos 重复调用,导致弹层预览图无法正常显示处理: 修改layer.js源码 ,点击事件绑定之前,先用off()进行解绑,避免重复绑定,如下: loop || parent.off('click').on('click', options.img, function(){ var othis = $(this), index = othis.attr('layer-index'); layer.photos($.extend(options, { photos: { start: index, data: data, tab: options.tab }, full: options.full }), true); pushData(); })
*请认真填写需求信息,我们会在24小时内与您取得联系。