使用Bootstrap-Fileinput预览视频

最新推荐文章于 2024-10-18 10:41:41 发布

归属i

最新推荐文章于 2024-10-18 10:41:41 发布

阅读量3.1k

点赞数 3

分类专栏：前端文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/weixin_43877725/article/details/108872861

版权

这篇博客介绍了如何在Bootstrap-Fileinput中预览视频文件。首先，讲解了如何获取视频文件并进行初始预览，然后通过initialPreviewConfig设置图片信息以实现预览效果。接着，展示了初始化fileinput的HTML代码，并特别指出，此配置仅用于预览视频，不包含上传等其他功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取视频文件

初始预览
在这里插入图片描述
附上链接，可自行查看文档

initialPreviewConfig

//使用示例


//设置初始预览与数据键
initialPreview:[ 
    " <img src ='/ images / desert.jpg'class ='file-preview-image'alt ='Desert'title ='Desert'>",
    " <img src ='/ images / jellyfish.jpg'class ='file-preview- image'alt ='Jelly Fish'title ='Jelly Fish'>",
]，
//初始预览配置
initialPreviewConfig: [
    {
   
        caption: 'desert.jpg',
        width: '120px',
        url: '/localhost/avatar/delete',
        key: 100,
        extra: {
   id: 100}
    },
    {
   
        caption: 'jellyfish.jpg', 
        width: '120px', 
        url: '/localhost/avatar/delete', 
        key: 101, 
        frameClass: 'my-custom-frame-css',
        frameAttr: {
   
            style: 'height:80px',
            title: 'My Custom Title',
        },
        extra: function() {
    
            return {
   id: $("#id").val()};
        },
    }
]

获取图片信息，初始化预览


var initialPreview = [];
var initialPreviewConfig = [];

	//视频文件信息加载
    function loadFileinput() {
   
        $.ajax({
   
            url:"/select_shop_video", //调用接口获取文件信息
            type

最低0.47元/天解锁文章