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格式的數據