整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

可视化的 JS:动态图演示 - 事件循环 Event Loop的过程


文地址: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();
 })