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

时间:2024-03-29 09:50:07

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

 <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-normal" id="testList">选择图片</button>
                    <div class="layui-upload-list">
                        <table class="layui-table">
                            <thead>
                            <tr>
                                <th>文件名</th>
                                <th>大小</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="demoList"></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="layui-btn" id="testListAction" onclick="hint()"
                            style="margin-left: 40%">立即提交
                    </button>
                    <button type="button" class="btn btn-primary" id="testListAction1" style="display:none">
                        提交图片
                    </button>
                </div>

### 注释也写的差不多了,不懂的小伙伴留言区一起讨论呀。
//提示提交
    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 = $(['<tr id="upload-' + index + '">'
                        , '<td>' + file.name + '</td>'
                        , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                        , '<td>等待上传</td>'
                        , '<td>'
                        , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">' +
                        '重传</button>'
                        , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        /*    ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">预览</button>'*/
                        , '</td>'
                        , '</tr>'].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('<span style="color: #5FB878;">上传成功</span>');
                    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('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(2).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
    });