layui框架实现多图片手动上传和随表单提交方法
首先在官方文档并没有手动上传的说明文档，这里手动实现上传原理是：在表单中有三个按钮，分别是上传图片按钮、隐藏上传按钮、表单提交按钮，点击上传图片按钮之后，图片添加在前端但是并没有真正的上传，而是在点击表单提交之后，后台返回数据（其中有新添加的表单的唯一标识）并判断表单提交成功之后再用JS事件触发隐藏上传按钮，这时真正实现图片上传，并传给后台相关数据，并在数据库中添加唯一表示来属于哪个提交的表单。下面是代码实现：
HTML代码：
<form class="layui-form" action="" > <div class="layui-form-item"> <label class="layui-form-label">姓名：</label> <div class="layui-input-block"> <input type="text" name="name" id="name" required maxlength="8" lay-verify="required" placeholder="必填" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">专业：</label> <div class="layui-input-inline"> <input type="text" name="major" id="major" maxlength="8" required lay-verify="required" placeholder="必填" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">QQ/微信：</label> <div class="layui-input-inline"> <input type="text" name="QQ" id="QQ" required maxlength="12" lay-verify="required" placeholder="必填" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">手机：</label> <div class="layui-input-inline"> <input type="text" name="phone" id="phone" maxlength="11" required lay-verify="required" placeholder="必填(查询结果时所需)" autocomplete="off" class="layui-input" value=""> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性别：</label> <div class="layui-input-block"> <input type="radio" name="sex" value="男" title="男" checked> <input type="radio" name="sex" value="女" title="女" > </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">图片上传:</label> <div class="layui-input-block"> <div class="layui-upload"> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;padding:10px 0 10px 0; "> <div class="layui-upload-list" id="img_upload"></div> </blockquote> <button type="button" class="layui-btn" style="background-color:#4383d3" id="img_upload_btn">添加图片</button> </div> <button id="hideUpload" type="button" style="display: none"></button> </div> </div> <div class="layui-form-item"> <div class="layui-input-special"> <button class="layui-btn" id="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary" id="reset" >重置</button> </div> </div> </form>
JS代码：
window.onload=function(){ //Demo layui.use(['form','upload','element','laydate'], function(){ var form = layui.form; var $ = layui.jquery ,upload = layui.upload; //监听提交 form.on('submit(formDemo)', function(data){ var date = new Date(); subData = { name:data.field.name.toString(), major:data.field.major.toString(), qq:data.field.QQ.toString(), mobile_phone:data.field.phone.toString(), sex:data.field.sex.toString() } ajax({ type:'post', url:'/free_clinic/submit', data:subData, success:(res)=>{ if(JSON.parse(res).msg == 'success'){ tip_text.innerHTML = '预约成功，请等待工作人员处理！'; tip_tip.style.display = 'block'; }else{ tip_text.innerHTML = '预约失败，请重新预约！'; tip_tip.style.display = 'block'; } }, error:(err)=>{ tip_text.innerHTML = '预约失败，请重新预约！'; } }); return false; }); //多图片上传 upload.render({ elem: '#img_upload_btn' //绑定点击按钮 ,url: '/free_clinic/upload' //访问后台路径 ,multiple: true //确认上传多张图片 ,accept: 'images/*' //图片格式 ,number: 6 //最大上传图片数量 ,auto:false //取消自动上传 ,method: 'post' //请求上传的 http 类型 ,bindAction:'#hideUpload' //绑定真正的上传按钮 ,data:{ //访问后台提交的数据 id:()=>{ return $('#phone').val();//官方文档说明：实现动态传值 }, time:()=>{ return subData.signup_time; } } ,choose: function(obj){ //预读本地文件示例，不支持ie8 obj.preview(function(index, file, result){ $('#img_upload').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">'); }); } ,done: function(res){ //上传完毕 } }); }); };
ps:后台一定要在访问后台之后返回JSON格式的数据
