记录layui数据表格使用文件上传按钮

最新推荐文章于 2024-06-29 08:31:59 发布

Mr.LJie

最新推荐文章于 2024-06-29 08:31:59 发布

阅读量875

点赞数 1

分类专栏： layui 文章标签： layui jquery 前端

本文链接：https://blog.csdn.net/liuqjie/article/details/132605020

版权

layui 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何在HTML页面中利用layui库进行文件上传，包括图片和PDF，以及展示和管理上传的文件。使用了Vue.js进行数据绑定和交互，展示了扫描件上传、预览和删除功能。

摘要由CSDN通过智能技术生成

一、前言

虽然用到这种的情况不多，但是还是记录下

二、相关代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="Expires" content="0"/>
    <meta http-equiv="Cache-Control" content="no-cache">
    <title>本地上传</title>
    <link rel="stylesheet" href="../libs/layui/css/layui.css?v=2.8.12">
    <link rel="stylesheet" href="../libs/bootstrap/bootstrap.min.css"/>
    <link rel="stylesheet" href="../libs/layui/css/layui.css?v=2.8.12">
    <link rel="stylesheet" href="../assets/css/custom.css?v=1.0.0"/>
</head>
<style>
    .lay_title {
        height: 40px;
        display: -webkit-box; /*  display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示  */
        -webkit-box-orient: vertical; /*  -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式  */
        -webkit-line-clamp: 2; /*  -webkit-line-clamp用来限制在一个块元素显示的文本的行数 */
        overflow: hidden;
    }

    .lay_span {
        width: 180px;
        margin-right: 10px;
    }

    .lay_span img {
        margin-top: 5px;
        width: 145px;
        height: 100px;
    }
</style>
<body>
<div class="row">
    <div class="span12">
        <div class="box box-default">
            <!-- box-body -->
            <div class="box-body">
                <table class="layui-hide" id="lay-table" lay-filter="lay-table"></table>
            </div>
        </div>
    </div>
</div>
<div class="row" id="app">
    <div class="span12">
        <div class="box box-default">
            <div class="box-header with-border">
                <h3 class="box-title">
                    <div class="dec_1"></div>
                    扫描件
                </h3>
            </div>
            <div class="box-body" id="scrollBody">
                <div class="form-group" id="smj_list">
                    <div class="span1-5 lay_span" v-for="(value, key) in jsonArray" :id="value.smjmc">
                        <div class="thumbnail">
                            <div @click="showImg(value.smjmc)">
                                <img :src="value.smjpath" :alt="value.name">
                                <hr>
                                <div class="lay_title">{{value.name}}</div>
                            </div>
                            <div class="lay_btn">
                                <a v-on:click="delFile(value.smjmc)" title="文件删除" style="color: red;"><i
                                        class="fa fa-trash-o fa-lg"></i>删除</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../jquery/jquery-1.12.4.min.js"></script>
<script src="../libs/bootstrap/bootstrap.min.js"></script>
<script src="../libs/layui/layui.js?v=2.8.12"></script>
<script src="../ywgj/vue/vue.min.js" charset="utf-8"></script>
<script src="../common/utils/xy-ui.js?v=20230823"></script>
<script>
    var imgArr = [];
    var clList = [{
        "id": "1711031508929916",
        "isNewRecord": false,
        "name": "办结单材料",
        "param": {}
    }, {"id": "2006291937364749", "isNewRecord": false, "name": "有效身份证明", "param": {}}];
    var uploadURL = '/ucm/ucmAction!postFile.do';
    var uploadParams = {
        "loginid": "test_st_a",
        "busitype": "UCM_IMAGE",
        "sysid": "sys_ucm",
        "yab003": "44",
        "aab301": "440000000000"
    };
    layui.use(function () {
        var table = layui.table
            , upload = layui.upload;
        // 渲染
        table.render({
            elem: '#lay-table',
            defaultToolbar: '',
            data: clList,
            page: true,//开启分页
            cols: [[ // 表头
                {field: 'name', title: '材料名称'},
                {
                    fixed: 'right', title: '操作', templet: function (d) {
                        //数据太多，只取需要的数据，也可以直接把整个行数据传过去
                        var rows = {
                            id: d.id,
                            name: d.name
                        }
                        return '<div class="layui-btn-container">' +
                            '<a type="button" class="layui-btn layui-btn-sm lay-upload-img" lay-value="' + JSON.stringify(rows).replace(/"/g, '&quot;') + '"><i class="layui-icon layui-icon-upload"></i>上传图片</a>' +
                            '<a type="button" class="layui-btn layui-bg-blue layui-btn-sm" lay-value="' + JSON.stringify(rows).replace(/"/g, '&quot;') + '"><i class="layui-icon layui-icon-upload"></i>上传PDF</a>' +
                            '</div>';
                    }
                }
            ]]
        });
        var base64Str;
        var uploadParam;
        upload.render({
            elem: '.lay-upload-img'
            , url: uploadURL
            , field: 'files'
            , accept: 'images' //只允许上传图片
            , acceptMime: 'image/jpeg,image/png' // 只筛选 jpg,png 格式图片
            , exts: 'jpg|png|jpeg'//允许上传的文件后缀。一般结合 accept 属性来设定。
            , before: function (obj) { // obj 参数同 choose
                // 如果需要用到行数据，可以这样写
                // var tableElem = this.item;
                // uploadParam = JSON.parse(tableElem.attr('lay-value'));
                $.modal.loading('文件上传中，请稍后……');
            }
            //我参数是固定的
            , data: uploadParams
            //如果需要用到行数据，可以这样写
            // , data: {
            //     id:function (){
            //         return uploadParam.id;
            //     },
            //     name:function (){
            //         return uploadParam.name;
            //     }
            // }
            //这种写法我没试，也可以这样试试
            // , data: uploadParam
            , choose: function (obj) {
                //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                obj.preview(function (index, file, result) {
                    base64Str = result;
                });
            }
            , done: function (res) {
                console.log(res);
                if (res.error) {
                    return $.modal.msgError("上传统一存储失败，请稍候重试");
                } else {
                    var dataJson = res.success.data;
                    // 文件上传ID
                    var fileId = dataJson[0].fileid;
                    // 获取当前行相关数据
                    var tableElem = this.item;
                    var rows = JSON.parse(tableElem.attr('lay-value'));
                    var json = {
                        name: rows.name,
                        smjmc: fileId,
                        smjpath: base64Str
                    }
                    rows.fileId = fileId;
                    imgArr.push(rows);
                    console.log(imgArr);
                    //上传成功后，显示数据
                    app.$data.jsonArray.push(json);
                    $.modal.closeAll();
                }
            }
        });
    });

    var app = new Vue({
        el: '#app'
        , data: {
            jsonArray: []
        }
        , created: function () {
            var _this = this;
        },
        methods: {
            showImg: function (fileId) {
            },
            downFile: function (fileId) {
            },
            delFile: function (id, fileId) {
                $('#' + fileId).remove();
            }
        }
    });
</script>
</body>
</html>