bootstrap-fileinput 使用

参考文档：http://www.bootstrap-fileinput.com/options.html

视频和图片上传和展示：

<div class="form-group row">
                <label for="video_path" class="col-sm-2 col-form-label"><span class="text-danger">*</span> 视频</label>
                <div class="col-sm-8">
                    <input type="file" class="form-control" name="video_path" id="video_path">
                    <input type="hidden" id="videoPath" name="videoPath" value="{$info.video_path|default=''}">
                    <div class="form-text text-muted m-t-10 small">格式mp4，最好在50M以内，最大不超过100MB，比例16:9，最小尺寸960*540，最佳尺寸1280*720</div>
                </div>
            </div>

            <div class="form-group row">
                <label for="img_path" class="col-sm-2 col-form-label"><span class="text-danger">*</span> 封面图片</label>
                <div class="col-sm-6">
                    <input type="file" class="form-control" name="img_path" id="img_path">
                    <input type="hidden" id="imgPath" name="imgPath" value="{$info.img_path|default=''}">
                    <div class="form-text text-muted m-t-10 small">jpg、jpeg、png，小于等于200KB，尺寸858*429</div>
                </div>
            </div>


<link href="/js/bootstrap-fileinput/themes/explorer-fa/theme.min.css" rel="stylesheet">
<script src="/js/bootstrap-fileinput/themes/explorer-fa/theme.min.js"></script>
<link href="/js/bootstrap-3.4.1/css/bootstrap.css" rel="stylesheet">

<script type="text/javascript">
    $(function () {
        //视频
        var videoPath = $('#videoPath').val();
        if(videoPath===''){
            $("#video_path").fileinput({
                language: 'zh',
                showUpload: false,
                showClose: false,
                dropZoneTitle: '拖拽文件到这里...',
                autoReplace: true,
                allowedFileTypes: ['video'],
                allowedFileExtensions : ['mp4'],
                initialPreviewAsData:true,
                layoutTemplates:{actionDelete: '', actionUpload: '', actionZoom: '', actionDownload: ''}
            });
        }else{
            $("#video_path").fileinput({
                language: 'zh',
                showUpload: false,
                showClose: false,
                dropZoneTitle: '拖拽文件到这里...',
                autoReplace: true,
                allowedFileTypes: ['video'],
                allowedFileExtensions : ['mp4'],
                initialPreviewAsData:true,
                initialPreview: ["{$info.r_path|default=''}"],
                initialPreviewConfig: [{type:"video",filetype:'video/mp4'}],
                layoutTemplates:{actionDelete: '', actionUpload: '', actionZoom: '', actionDownload: ''}
            }).on('filecleared', function (event, data, msg) {
                $('#videoPath').val('');
            }).on("filebatchselected", function(event, files) {
                $('#videoPath').val('');
            });
        }
        //封面图
        var imgPath = $('#imgPath').val();
        if(imgPath===''){
            $("#img_path").fileinput({
                language: 'zh',
                showUpload: false,
                showClose: false,
                dropZoneTitle: '拖拽文件到这里...',
                autoReplace: true,
                allowedFileTypes: ['image'],
                allowedFileExtensions : ['jpg','jpeg','png'],
                initialPreviewAsData:true,
                layoutTemplates:{actionDelete: '', actionUpload: '', actionZoom: ''}
            });
        }else{
            $("#img_path").fileinput({
                language: 'zh',
                showUpload: false,
                showClose: false,
                dropZoneTitle: '拖拽文件到这里...',
                autoReplace: true,
                allowedFileTypes: ['image'],
                allowedFileExtensions : ['jpg','jpeg','png'],
                initialPreviewAsData:true,
                initialPreview: ["{$sCosUrl|default=''}"+imgPath],
                layoutTemplates:{actionDelete: '', actionUpload: '', actionZoom: '', actionDownload: ''}
            }).on('filecleared', function (event, data, msg) {
                $('#imgPath').val('');
            }).on("filebatchselected", function(event, files) {
                $('#imgPath').val('');
            });
        }
    })

    
</script>

bootstrap-fileinput 还提供了 layoutTemplates 渲染模板配置, 只要愿意花时间, 可以自定义大部分功能
给上传的图片添加“打印”按钮

$("#file1").fileinput({
        'uploadUrl': ctx + 'fileUpload',
        overwriteInitial: false,
        initialPreviewAsData: true,
        layoutTemplates : {
            actions: '<div class="file-actions">\n' +
                '    <div class="file-footer-buttons">\n' +
                '        {upload} {delete} {zoom} {other} <button type="button" class="kv-file-print btn btn-sm btn-kv btn-default btn-outline-secondary" title="打印"><i class="glyphicon glyphicon-print"></i></button>' +
                '    </div>\n' +
                '    {drag}\n' +
                '    ' +
                '    <div class="clearfix"></div>\n' +
                '</div>',
        }
    });