layui multi-picture frame and manually upload with the form submission method

First official document did not specify the document manually uploaded, here implemented manually uploading principle is: There are three buttons on the form, namely, upload pictures button to hide the upload button, the form submit button after, click the Upload Picture button, add a picture on the front but it did not really upload, but after clicking submit the form, return the background data (including the newly added forms of unique identification) and then determine when the form is submitted successfully JS event triggered hide the upload button, then the real picture upload and passed the background data, and add a unique representation in the database to which belong to the form submitted. Here is the code to achieve:

HTML code:

<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 code:

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 (the JSON.parse (RES) a .msg ==' success' ) { 
                                tip_text.innerHTML = 'reservation is successful, the wait staff handling'! ; 
                                tip_tip .style.display= 'Block'  ;
                            } the else { 
                                tip_text.innerHTML = 'reservation fails, reschedule! ' ; 
                                Tip_tip.style.display =' Block ' ; 
                            } 
                                    
                       }, 
                        error: (ERR) => { 
                            tip_text.innerHTML =' reservation fails, reschedule! ' ; 
                        } 
                    });      
                Return  to false ; 
            }); 

            // multi-picture upload 
            upload.render ({ 
                elem: ' #img_upload_btn '         // bind the click of a button 
                , url: '/ free_clinic / the Upload'      // access the back-Path 
                , Multiple: to true                  // Confirm upload multiple images 
                , the Accept: 'ImagesRF Royalty Free / *'              // Image Format 
                , Number The: 6                       // maximum upload of images 
                , Auto: false                      // cancel the automatic upload 
                , Method,: 'POST'                  // request type http upload 
                , bindAction: '# hideUpload'        // bind the real upload button 
                , the Data: {                          // access backstage submitted data 
                    id: () =>{
                         Return $ ( 'Phone #') Val ();. // official documentation: dynamically by value 
                    }, 
                    Time :() => {
                         return subData.signup_time; 
                    } 
                    
                } 
                , the Choose: function (obj) {
                   // local file prefetch example, does not support IE8 
                  obj.preview ( function (index, file, Result) { 
                    $ ( '#img_upload'). the append ( '<IMG the src = "' + Result + '" Alt = "' + file + .name ' "class =" IMG-layui-Upload ">' );
                  });
                }
                ,done: function (RES) {
                   // uploaded 
                  
                } 
              }); 
        }); 
};

ps: the background must return data in JSON format after visiting backstage