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

整体思路:通过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'); //显示重传
            }
        });
    });
  • 5
    点赞
  • 43
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
Layui 表单数据渲染可以使用 layui.form 的 render 方法,该方法支持以下参数: - elem: 指定渲染的表单元素,可以是 DOM 对象,也可以是 CSS 选择器。 - data: 指定渲染的数据,可以是 JSON 对象或数组。 - filter: 指定表单的过滤器,用于监听表单元素的变化。 示例代码如下: HTML 代码: ```html <form class="layui-form" lay-filter="example-form"> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" 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-block"> <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="example">提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> ``` JavaScript 代码: ```javascript var data = { username: '张三', password: '123456' }; layui.use(['form'], function () { var form = layui.form; // 渲染表单数据 form.render(null, 'example-form'); // 监听表单提交事件 form.on('submit(example)', function (data) { console.log(data.field); return false; }); }); ``` 在以上代码中,我们首先定义了一个 JSON 对象 data,其中包含了用户名和密码的值。然后使用 layui.form 的 render 方法渲染表单数据,其中 elem 参数指定渲染的表单元素为 example-form,也就是我们定义的表单元素的 lay-filter 属性值。最后,使用 form.on 监听表单提交事件,当用户点击提交按钮时,输出表单数据
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值