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