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代码

<script>
    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){
                //上传完毕
            }
        });
    });
};
</script>

PS:后台一定要在访问后台之后返回JSON格式的数据