Layui表单数据和多图片上传一起提交

整体思路：通过Ajax 提交form表单的数据，然后在ajax的回调中触发图片上传。
前端框架用的是layui,直接上图，上代码；

 

                    选择图片
                    

                        

                            

                            

                                
文件名
                                
大小
                                
状态
                                
操作
                            
                            
                            

                        
                    
                
                

                    立即提交
                    
                    
                        提交图片
                    
                

### 注释也写的差不多了，不懂的小伙伴留言区一起讨论呀。
//提示提交
    var BCODE;    
    function hint() {
        $.ajax({
            url: "/inputBill/add",
            type: 'POST',
            data: $("#formid").serialize(),
            // 告诉jQuery不要去处理发送的数据
            processData: false,
            // 告诉jQuery不要去设置Content-Type请求头
            contentType: false,
            async: true,
            success: function (data) {
                BCODE = data;
                var imgVal = $("#demoList").html();
                if (imgVal == '') {
                    location.href = "/inputBill/index";
                    layer.msg('提交成功');
                } else {
                    $("#testListAction1").trigger("click");  //触发上传文件
                }
            }
        });
    }

    //多图片上传

    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;
        var demoListView = $('#demoList')
        console.log(demoListView)
            , uploadListIns = upload.render({
            elem: '#testList'
            , url: '/inputBill/Uploadattachment'
            , acceptMime: 'image/*'
            , multiple: true
            , auto: false
            , bindAction: '#testListAction1'
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致。其中输入向后台传输的参数
                this.data = {
                    'BCODE': BCODE
                };
            }
            , choose: function (obj) {
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列

                obj.preview(function (index, file, result) {
                    var tr = $([''
                        , '' + file.name + ''
                        , '' + (file.size / 1014).toFixed(1) + 'kb'
                        , '等待上传'
                        , ''
                        , '' +
                        '重传'
                        , '删除'
                        /*    ,'预览'*/
                        , ''
                        , ''].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });
                    //预览
                    demoListView.append(tr);
                });
            }
            , done: function (res, index, upload) {
                if (res.return_code == 1) { //上传成功
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(1).html('上传成功');
                    tds.eq(2).html(''); //清空操作
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                this.error(index, upload);
            }
            , allDone: function (obj) { //当文件全部被提交后，才触发
                layer.msg('保存成功！', {
                    time: 2000, //2s后自动关闭
                    btn: ['确定']
                });
                location.href = "/inputBill/index";
            }
            , error: function (index, upload) {
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(1).html('上传失败');
                tds.eq(2).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
    });