Bootstrap fileinput回显

一、效果

图片回显

视频回显

二、代码

$("#file-pic").fileinput('destroy');

$('#file-pic').fileinput({

showUpload:false,

showRemove:false,

language:"zh",

uploadUrl:'#',

dropZoneTitle:"可以通过拖拽图片放到这里",

dropZoneClickTitle:"或者点击此区域添加图片",

browseOnZoneClick:true,

allowedFileTypes: ['image'],

allowedFileExtensions: ["jpg","jpeg","png","gif",".bmp"],

initialPreviewAsData:true,

initialPreview: [

row.imgUrl

],

initialCaption: row.fileName,

maxFileSize:10 *1024 *1024,

messages: {

maxFileSize:'文件上传的最大大小为 10MB',

acceptFileTypes:'此文件是不支持的视频格式'

    },

layoutTemplates: {

actionUpload:''

    }

});

$("#file-video").fileinput('destroy');

$('#file-video').fileinput({//初始化上传文件框

    showUpload:false,

showRemove:false,

language:"zh",

uploadUrl:'#',

dropZoneTitle:"可以通过拖拽视频文件放到这里",

dropZoneClickTitle:"或者点击此区域添加视频",

browseOnZoneClick:true,

acceptFileTypes:/(\.|\/)(mp4|webm|ogg|mp3|wav)$/i,

initialPreviewAsData:true,

initialPreview: [

row.videoUrl

],

initialPreviewConfig: [

{type:"video",filetype:videoType}

],

initialCaption: row.fileName,

maxFileSize:30 *1024 *1024,

messages: {

maxFileSize:'文件上传的最大大小为 30MB',

acceptFileTypes:'此文件是不支持的视频格式'

    },

layoutTemplates: {

actionUpload:''

    }

});