bootstrap-fileinput 使用

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

//初始化鱼类名录信息上传的fileinput控件
function fishFileInput(ctrlName, uploadUrl) {
    $("#fish_file").fileinput({
        language: 'zh', //设置语言
        uploadUrl: '/SongshanManagement/animalcontent/addFishPicture.html', //上传的地址
        enctype: 'multipart/form-data',
        allowedFileExtensions : ['jpg', 'png','bmp','jpeg'],//接收的文件后缀
        showUpload: false, //是否显示上传按钮
        showPreview: true,              //展前预览
        showCaption: false,//是否显示标题
        maxFileSize : 10000,//上传文件最大的尺寸
        maxFilesNum : 10,//
        dropZoneEnabled: false,//是否显示拖拽区域
        browseClass: "btn btn-primary", //按钮样式
        uploadAsync: false,
        layoutTemplates :{
            // actionDelete:'', //去除上传预览的缩略图中的删除图标
            actionUpload:'',//去除上传预览缩略图中的上传图片；
            actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。
        },
        uploadExtraData:function (previewId, index) {
            //向后台传递id作为额外参数，是后台可以根据id修改对应的图片地址。
            var obj = {};
            obj.id = fishId;
            return obj;
        }
    }).on("filebatchuploadsuccess", function(event, data) {
        if(data.response){
            closeModal('fishAddDetail') 关闭模态框。
            $("#bootstraptable_fishcontent").bootstrapTable("refresh");
        }
    }).on('fileerror', function(event, data, msg) {  //一个文件上传失败
        console.log('文件上传失败！'+msg);
    });
}

 

视频和图片上传和展示：

<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>',
        }
    });