layui框架实现多图片手动上传和随表单提交方法

Posted 2020-11-22 liqian-front-end-engineer

首先在官方文档并没有手动上传的说明文档，这里手动实现上传原理是：在表单中有三个按钮，分别是上传图片按钮、隐藏上传按钮、表单提交按钮，点击上传图片按钮之后，图片添加在前端但是并没有真正的上传，而是在点击表单提交之后，后台返回数据（其中有新添加的表单的唯一标识）并判断表单提交成功之后再用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格式的数据