layui表格中预览视频和图片

news2024/11/19 20:18:45

全代码

<!DOCTYPE html>
<html>

<head>
    <title>Layui：数据表格table中预览图片、视频</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="../dist/css/layui.css">
    <style>

    </style>
</head>

<body>
<table id="demo" lay-filter="demo"></table>
<script type="text/html" id="urlTemplet">
    {{# if(d.type == 1) { }}
    <img src="{{d.url}}" alt="{{d.title}}" data-type="1" height="30" class="preview-all"/>
    {{# } else if (d.type == 2) { }}
    <video src={{d.url}} height="30" data-type="2" class="preview-all"></video>
    {{# } else { }}
    未知
    {{# } }}
</script>
<script type="text/html" id="typeTemplet">
    {{# if(d.type == 1) { }}
    <button class="layui-btn layui-btn-xs">图片</button>
    {{# } else if (d.type == 2) { }}
    <button class="layui-btn layui-btn-danger layui-btn-xs">视频</button>
    {{# } else { }}
    <button class="layui-btn layui-btn-primary layui-btn-xs">未知</button>
    {{# } }}
</script>
</body>
<script src="../dist/layui.js"></script>
<!--您的Layui代码start-->
<script type="text/javascript">
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'form'], function () {
        var $ = layui.$
            , laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , form = layui.form //表单
            , element = layui.element; //元素操作 等等...

        /*layer弹出一个示例*/
        // layer.msg('Hello World');

        //数据表格实例
        let userTable = table.render({
            elem: '#demo'
            // ,width: 312
            // ,url: '/static/json/table/user.json' //数据接口
            , data: getData()
            , cols: [[ //表头
                {field: 'id', title: 'ID', fixed: 'left', width: 100}
                , {field: 'username', title: '用户名'}
                , {field: 'url', title: '图片/视频', templet: '#urlTemplet'}
                , {field: 'sorts', title: '排序'}
                , {field: 'type', title: '类型', align: 'center', templet: '#typeTemplet'}
            ]]
            , page: true //开启分页
            , limit: 6 //默认每页记录数
            , limits: [3, 6, 9] //可选每页记录数
        });

        //监听点击方法
        $(document).on('click', '.preview-all', function (data) {
            // var obj = data.target.dataset;
            let clickObject = data.target; //点击的对象
            let url = clickObject.src; //图片、视频 地址
            let type = $(clickObject).data('type'); //点击的类型：1-图片，2-视频；3-未知
            if (type == 1) {
                previewPicture(url);
            } else if (type == 2) {
                previewVideo(url);
            }
        });

        //图片预览，传url
        function previewPicture(url) {
            layer.photos({
                photos: {
                    "title": '预览图',
                    "id": 222,
                    "start": 0,
                    "data": [{
                        "src": url
                    }]
                }
                // ,closeBtn: 1 //是否显示关闭按钮
            });
        }

        //视频预览，传url,width,height
        function previewVideo(url, width, height) {
            width = width ? width : '65%';
            height = height ? height : '65%';
            let content = '<video width="100%" height="90%"  controls="controls" autobuffer="autobuffer"  autoplay="autoplay" loop="loop">' +
                '<source src="' + url + '" type="video/mp4"></source></video>';
            layer.open({
                type: 1,
                maxmin: true, //打开放大缩小按钮
                title: '视频播放',
                area: [width, height],
                content: content,
            });
        }

        //文件预览
        function previewFile(url) {
            window.location.href = url;
        }

        //模拟返回表单中的数据
        function getData() {
            let data = [
                {
                    "id": 10000,
                    "username": "user-0",
                    type: 1,
                    sorts: 1,
                    url: 'https://profile-avatar.csdnimg.cn/8f386c41df8f4dcd8a5b8e00fb8ffd87_qq_36025814.jpg!3'
                },
                {
                    "id": 10001,
                    "username": "user-1",
                    type: 1,
                    sorts: 1,
                    url: 'https://csdnimg.cn/medal/51_create.png',
                },
                {
                    "id": 10002,
                    "username": "user-2",
                    type: 3,
                    sorts: 2,
                    url: ''
                },
                {
                    "id": 10003,
                    "username": "user-3",
                    type: 1,
                    sorts: 3,
                    url: 'https://img0.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
                },
                {
                    "id": 10004,
                    "username": "user-4",
                    type: 2,
                    sorts: 1,
                    url: 'D:/TenXun/WeiXin/WeChatSpace/WeChat Files/w452339689/FileStorage/Video/2021-09/ab83a073d13fc97a774c60e8c5fa1510.mp4'
                },
                {
                    "id": 10005,
                    "username": "user-5",
                    type: 2,
                    sorts: 4,
                    rec: 0,
                    url: 'https://vd2.bdstatic.com/mda-ngd42cykdpyqxnjd/720p/h264/1657767198646938123/mda-ngd42cykdpyqxnjd.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1658114325-0-0-56a7e35d692939d6d0ee1d39e7e8657c&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=2925113439&vid=10700712952852671679&abtest=103525_2&klogid=2925113439'
                },
                {
                    "id": 10006,
                    "username": "user-6",
                    type: 1,
                    sorts: 5,
                    url: 'https://profile-avatar.csdnimg.cn/8f386c41df8f4dcd8a5b8e00fb8ffd87_qq_36025814.jpg!3'
                },
                {
                    "id": 10007,
                    "username": "user-7",
                    type: 1,
                    sorts: 1,
                    url: 'https://img0.baidu.com/it/u=2521851051,2189866243&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
                },
                {
                    "id": 10008,
                    "username": "user-8",
                    type: 1,
                    sorts: 7,
                    url: 'https://profile-avatar.csdnimg.cn/8f386c41df8f4dcd8a5b8e00fb8ffd87_qq_36025814.jpg!3'
                },
                {
                    "id": 10009,
                    "username": "user-9",
                    type: 1,
                    sorts: 1,
                    url: 'https://profile-avatar.csdnimg.cn/8f386c41df8f4dcd8a5b8e00fb8ffd87_qq_36025814.jpg!3'
                }
            ];

            return data;
        }
    });
</script>
</html>

主要用到的方法

  • getData（）
    getData()示例中是模拟数据，代入到自己的功能中就是请求返回的数据。
  • 点击实现预览效果
 $(document).on('click', '.preview-all', function (data) {			//点击的预览效果
  // var obj = data.target.dataset;
       let clickObject = data.target; //点击的对象
       let url = clickObject.src; //图片、视频 地址
       let type = $(clickObject).data('type'); //点击的类型：1-图片，2-视频；3-未知
       if (type == 1) {		//如果是1，调用预览图片方法
           previewPicture(url);
       } else if (type == 2) {		//如果是2，调用预览视频方法
           previewVideo(url);
       }
   });

预览方法

//图片预览，传url
        function previewPicture(url) {
            layer.photos({
                photos: {
                    "title": '预览图',
                    "id": 222,
                    "start": 0,
                    "data": [{
                        "src": url
                    }]
                }
                // ,closeBtn: 1 //是否显示关闭按钮
            });
        }

        //视频预览，传url,width,height
        function previewVideo(url, width, height) {
            width = width ? width : '65%';
            height = height ? height : '65%';
            let content = '<video width="100%" height="90%"  controls="controls" autobuffer="autobuffer"  autoplay="autoplay" loop="loop">' +
                '<source src="' + url + '" type="video/mp4"></source></video>';
            layer.open({
                type: 1,
                maxmin: true, //打开放大缩小按钮
                title: '视频播放',
                area: [width, height],
                content: content,
            });
        }

        //文件预览
        function previewFile(url) {
            window.location.href = url;
        }
  • 表格展示对应的数据
    主要是{field: 'url', title: '图片/视频', templet: '#urlTemplet'}
        let userTable = table.render({
            elem: '#demo'
            // ,width: 312
            // ,url: '/static/json/table/user.json' //数据接口
            , data: getData()
            , cols: [[ //表头
                {field: 'id', title: 'ID', fixed: 'left', width: 100}
                , {field: 'username', title: '用户名'}
                , {field: 'url', title: '图片/视频', templet: '#urlTemplet'}		//使用urlTemplet这个模板
                , {field: 'sorts', title: '排序'}
                , {field: 'type', title: '类型', align: 'center', templet: '#typeTemplet'}		//使用typeTemplet这个模板
            ]]
            , page: true //开启分页
            , limit: 6 //默认每页记录数
            , limits: [3, 6, 9] //可选每页记录数
        });

模板方法，

<script type="text/html" id="urlTemplet">
    {{# if(d.type == 1) { }}
    <img src="{{d.url}}" alt="{{d.title}}" data-type="1" height="30" class="preview-all"/>
    {{# } else if (d.type == 2) { }}
    <video src={{d.url}} height="30" data-type="2" class="preview-all"></video>
    {{# } else { }}
    未知
    {{# } }}
</script>

url中就是我们后端的具体存储地址，
如果url是本地地址，会报错，需要配置静态资源
在这里插入图片描述

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 配置静态资源
        registry.addResourceHandler("/video/**")
                .addResourceLocations("file:"+videoUrl);	//变量videoUrl值是/opt/video/,只要访问路径是video/**这种，就去/opt/video目录
    }

文件实际路径是/opt/video/ab83a073d13fc97a774c60e8c5fa1510.mp4,然后如图，替换url路径，最终路径就是http://192.168.0.105:8082/video/ab83a073d13fc97a774c60e8c5fa1510.mp4,然后返回给前端
在这里插入图片描述

来源

html代码来源：https://blog.csdn.net/qq_36025814/article/details/125860454，后端代码自己整理，有不明白的留言

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1337972.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

多维时序 | MATLAB实现SSA-BiLSTM麻雀算法优化双向长短期记忆神经网络多变量时间序列预测

多维时序 | MATLAB实现SSA-BiLSTM麻雀算法优化双向长短期记忆神经网络多变量时间序列预测

多维时序 | MATLAB实现SSA-BiLSTM麻雀算法优化双向长短期记忆神经网络多变量时间序列预测 目录 多维时序 | MATLAB实现SSA-BiLSTM麻雀算法优化双向长短期记忆神经网络多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.MATLAB实现SSA-BiLSTM麻雀算法优化…
阅读更多...
string类的函数讲解

string类的函数讲解

标准库中的string类 首先关于string类的了解&#xff0c;我先给出官方的string类的讲解&#xff0c;以便于大家的学习&#xff1a;链接: http://www.cplusplus.com/reference/string/string/?kwstring 这个网站是C官方网站&#xff0c;里面对于各个关键字和库函数的讲解都是很…
阅读更多...
Kubernetes (四) 资源清单及yaml文件详解

Kubernetes (四) 资源清单及yaml文件详解

一. 资源清单 二. 编写yaml文件及内容详解 常用命令 …
阅读更多...
【开源】基于Vue+SpringBoot的停车场收费系统

【开源】基于Vue+SpringBoot的停车场收费系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 停车位模块2.2 车辆模块2.3 停车收费模块2.4 IC卡模块2.5 IC卡挂失模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 停车场表3.2.2 车辆表3.2.3 停车收费表3.2.4 IC 卡表3.2.5 IC 卡挂失表 四、系统实现五、核心代码…
阅读更多...
服务器数据恢复-raid6离线磁盘强制上线后分区打不开的数据恢复案例

服务器数据恢复-raid6离线磁盘强制上线后分区打不开的数据恢复案例

服务器数据恢复环境&#xff1a; 服务器上有一组由12块硬盘组建的raid6磁盘阵列&#xff0c;raid6阵列上层有一个lun&#xff0c;映射到WINDOWS系统上使用&#xff0c;WINDOWS系统划分了一个GPT分区。 服务器故障&分析&#xff1a; 服务器在运行过程中突然无法访问。对服务…
阅读更多...
RPKM、FPKM 和 TPM cpm

RPKM、FPKM 和 TPM cpm

落在一个基因区域内的read counts数目取决于基因长度和测序深度。一个基因越长&#xff0c;测序深度越高&#xff0c;落在其内部的reads数目就会相对越多。而为了比较不同样本中不同基因的表达量&#xff0c;就去除测序深度和基因长度的的影响。采用了两个标准化&#xff1a;re…
阅读更多...
2023 NCTF writeup

2023 NCTF writeup

CRYPTO Sign 直接给了fx,gx&#xff0c;等于私钥给了&#xff0c;直接套代码&#xff0c;具体可以参考&#xff1a; https://0xffff.one/d/1424 fx [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0…
阅读更多...
后端业务架构文档模板

后端业务架构文档模板

文章目录 1 业务理解1.1 项目目标1.2 业务术语1.3 系统边界1.4 关键领域模型 2 系统架构图2.1 分层架构图2.2 系统链路图2.3 系统部署图 3 关键流程3.1 关键流程13.1.2 流程简述3.1.2 业务流程图3.1.3 安全性3.1.3.1 资金安全3.1.3.2 内容安全 3.1.4 稳定性3.1.4.1 接口依赖3.1…
阅读更多...
Zookeeper的使用场景

Zookeeper的使用场景

统一命名服务 利用ZooKeeper节点的树形分层结构和子节点的顺序维护能力&#xff0c;来为分布式系统中的资源命名。 例&#xff1a;分布式节点命名 分布式消息队列 1.在Zookeeper中创建一个持久节点&#xff0c;用作队列的根节点。队列元素的节点放在这个根节点下。 2.入队:…
阅读更多...
【Linux学习笔记】Linux下nginx环境搭建

【Linux学习笔记】Linux下nginx环境搭建

1、下载nginx 安装rpm命令: rpm ivh nginx-release.rpm。(直接使用linux命令下载wget http://nginx.org/packages/rhel/6/noarch/RPMS/nginx-release-rhel-6-0.el6.ngx.noarch.rpm 2、设置nginx开机启动 chkconfig nginx on 3、开启nginx服务 方法一&#xff1a;service nginx…
阅读更多...
centos7 安装最新版jenkins； 安装jdk17 jenkins； 2024安装最新版jenkins； jenkins部署服务器启动失败

centos7 安装最新版jenkins； 安装jdk17 jenkins； 2024安装最新版jenkins； jenkins部署服务器启动失败

注意&#xff1a; java, maven配置&#xff0c;不再赘述&#xff0c;主要解决&#xff1a;配置端口&#xff0c;启动失败&#xff0c;问题 提供一个jdk下载网站&#xff1a; https://www.injdk.cn/ /etc/profile配置&#xff1a; MAVEN_HOME/home/maven export PATH$MAVEN_HO…
阅读更多...
SEO网站分类完整指南

SEO网站分类完整指南

你知道吗&#xff0c;适当的网站分类结构对于良好的SEO很重要&#xff1f;在我们的最新指南中了解如何使用网站分类。 对于那些已经在SEO领域工作了一段时间的人来说&#xff0c;你可能听说过网站分类法&#xff0c;因为它指的是网站。 当您提到网站的结构以及用户浏览的难易…
阅读更多...
k8s面试之——简述网络模型

k8s面试之——简述网络模型

kubernetes网络模型是kubernetes集群中管理容器网络通信的一种机制&#xff0c;用于实现pod间、pod与外部网络间的通信和互联&#xff0c;并提供了多种网络插件和配置选项来满足不同应用场景下的需求。kubernetes网络模型可以分为一下几个部分&#xff1a; 1. pod网络模型 在…
阅读更多...
IntelliJ IDEA配置：过滤Project显示的文件类型

IntelliJ IDEA配置：过滤Project显示的文件类型

在IntelliJ IDEA-Settings-Editor-File Types界面设置&#xff0c;可设置识别的文件类型及忽略的文件类型&#xff0c;被识别的文件类型会展示在Project浏览窗口&#xff0c;忽略的文件类型不会展示在Project浏览窗口。
阅读更多...
使用python netmiko模块批量配置Cisco、华为、H3C路由器交换机（支持 telnet 和 ssh 方式）

使用python netmiko模块批量配置Cisco、华为、H3C路由器交换机（支持 telnet 和 ssh 方式）

0. 当前环境 外网电脑Python版本&#xff1a;3.8.5&#xff08;安装后不要删除安装包&#xff0c;以后卸载的时候用这个&#xff09;外网电脑安装netmiko第三方库&#xff1a;cmd中输入pip install netmiko内网电脑环境&#xff1a;无法搭建python环境&#xff0c;需外网电脑完…
阅读更多...
【kafka消息里会有乱序消费的情况吗？如果有，是怎么解决的？】

【kafka消息里会有乱序消费的情况吗？如果有，是怎么解决的？】

文章目录 什么是消息乱序消费了&#xff1f;顺序生产&#xff0c;顺序存储&#xff0c;顺序消费如何解决乱序数据库乐观锁是怎么解决这个乱序问题吗 保证消息顺序消费两种方案固定分区方案乐观锁实现方案 前几天刷着视频看见评论区有大佬问了这个问题&#xff1a;你们的kafka消…
阅读更多...
Bug：Too many open files【ulimit限制】

Bug：Too many open files【ulimit限制】

Bug&#xff1a;Too many open files 今天在开发某个下载功能时&#xff0c;发现文件总是下载到250多个程序就挂掉&#xff0c;同时会打崩服务器&#xff0c;查看错误日志发现报&#xff1a;too many open files. 思路&#xff1a;根据错误信息可以知道打开的文件数过多&#x…
阅读更多...
【滑动窗口】【map】LeetCode:76最小覆盖子串

【滑动窗口】【map】LeetCode:76最小覆盖子串

作者推荐 【二叉树】【单调双向队列】LeetCode239:滑动窗口最大值 本文涉及知识点 滑动窗口 题目 给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串&#xff0c;则返回空字符串 “” 。 注意&#xff1a; 对…
阅读更多...
【工具】windeployqt 在windows + vscode环境下打包

【工具】windeployqt 在windows + vscode环境下打包

目录 0.背景简介 1.windeployqt简介 2.打包具体过程 1&#xff09;用vscode编译&#xff0c;生成Release文件夹&#xff08;也有Debug文件夹&#xff0c;但是发布版本一般都是用Release&#xff09; 2&#xff09;此时可以看下Release文件夹内&#xff0c;一般是.exe可执行…
阅读更多...
PYTHON基础：最小二乘法

PYTHON基础：最小二乘法

最小二乘法的拟合 最小二乘法是一种常用的统计学方法&#xff0c;用于通过在数据点中找到一条直线或曲线&#xff0c;使得这条直线或曲线与所有数据点的距离平方和最小化。在线性回归中&#xff0c;最小二乘法被广泛应用于拟合一条直线与数据点之间的关系。 对于线性回归&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023