1 概述    

    在若依开源的未分离版本项目中使用。这里只给了单文件的处理，更多可参考文档bootstrap-fileinput 中文文档http://www.bootstrap-fileinput.com/examples.html        主要实现几个功能：

• 异步上传及上传成功回调
• 数据预览回显，pdf及图片直接预览，其他文件使用图标显示
• 监听删除按钮

效果图如下：

 

2 代码配置

1 引入css,js

<th:block th:include="include :: bootstrap-fileinput-css"/>

<th:block th:include="include :: bootstrap-fileinput-js"/>

2 html

<div class="col-sm-12">
    <div class="form-group">
        <label class="col-sm-3 control-label is-required">上传文件：</label>
        <div class="col-sm-8">
            <input name="fileUrl" class="form-control" type="hidden" th:field="*{fileUrl}">
            <input name="host" class="form-control" type="hidden">
            <div class="file-loading">
                <input class="fileUpload" type="file" id="file" name="file">
            </div>
        </div>
    </div>
</div>

3 js 代码实现

var fileUrl = '[[${docArchives.host+docArchives.fileUrl}]]'
var docId = '[[${docArchives.id}]]'
var docName = '[[${docArchives.name}]]'

// 生成预览文件链接，返回数组对象
function initialPreview() {
    console.log(`fileUrl = ${fileUrl}`)
    return [fileUrl]
}
// 预览文件配置，需要跟 initialPreview() 返回的数组一一对应
function initialPreviewConfig() {
    const ext   = fileUrl.substr(fileUrl.lastIndexOf('.') + 1)
    let extType = 'object'

    if (/(pdf)$/i.test(ext)) {
        extType = 'pdf'
    }

    if (/(bmp|gif|jpg|jpeg|png)$/i.test(ext)) {
        extType = 'image'
    }

    return [
        {
            type: extType,
            // size: 8000,
            // caption: docName,
            filename: fileUrl,
            url: fileUrl,
            key: docId
        },

    ]
}


const fileUploadOption = {
    theme: 'explorer-fas',
    uploadUrl: ctx + "common/upload",
    language: 'zh',
    allowedFileExtensions: ['bmp', 'gif', 'jpg', 'jpeg', 'png', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx',
                            'html', 'htm', 'txt', 'rar', 'zip', 'gz', 'bz2', 'pdf', 'bpmn', 'bar'],
    dropZoneEnabled: false,
    maxFileCount: 1,
    minFileCount: 1,
    autoReplace: false,
    overwriteInitial: true,
    layoutTemplates: {
        actionUpload: '',//去除上传预览缩略图中的上传图片
        //actionZoom:'',   //去除上传预览缩略图中的查看详情预览的缩略图标
        //actionDownload:'' //去除上传预览缩略图中的下载图标
        actionDelete: '', //去除上传预览的缩略图中的删除图标
    },
    showUploadedThumbs: false,
    showUpload: false,
    fileDropZoneTitle: 'xxx',
    // previewFileType: ['image'],
    initialPreview: initialPreview(),
    initialPreviewConfig: initialPreviewConfig(),
    initialPreviewAsData: true, // 默认为数据
    initialPreviewFileType: 'image', // 默认为`image`，在下面的配置中可以覆盖
    preferIconicPreview: true, // 这将强制缩略图按照以下文件扩展名的图标显示
    previewFileIconSettings: { // 配置你的文件扩展名对应的图标
        'doc': '<i class="fa fa-file-word-o text-primary"></i>',
        'xls': '<i class="fa fa-file-excel-o text-success"></i>',
        'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
        // 'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>', // 注释否则无法预览
        'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
        'htm': '<i class="fa fa-file-code-o text-info"></i>',
        'txt': '<i class="fa fa-file-text-o text-info"></i>',
        'mov': '<i class="fa fa-file-movie-o text-warning"></i>',
        'mp3': '<i class="fa fa-file-audio-o text-warning"></i>',
        // 以下这些文件类型的注释未配置扩展名确定逻辑（键值本身会被用作扩展名）
        // has been configured (the keys itself will be used as extensions)
        // 'jpg': '<i class="fa fa-file-photo-o text-danger"></i>',
        // 'gif': '<i class="fa fa-file-photo-o text-muted"></i>',
        // 'png': '<i class="fa fa-file-photo-o text-primary"></i>'
    },
    previewFileExtSettings: { // 配置确定图标文件扩展名的逻辑代码
        'doc': function (ext) {
            return ext.match(/(doc|docx)$/i);
        },
        'xls': function (ext) {
            return ext.match(/(xls|xlsx)$/i);
        },
        'ppt': function (ext) {
            return ext.match(/(ppt|pptx)$/i);
        },
        'zip': function (ext) {
            return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);
        },
        'htm': function (ext) {
            return ext.match(/(htm|html)$/i);
        },
        'txt': function (ext) {
            return ext.match(/(txt|ini|csv|java|php|js|css)$/i);
        },
        'mov': function (ext) {
            return ext.match(/(avi|mpg|mkv|mov|mp4|3gp|webm|wmv)$/i);
        },
        'mp3': function (ext) {
            return ext.match(/(mp3|wav)$/i);
        },
    }

}

$(".fileUpload").fileinput(fileUploadOption)
                .on("filebatchselected", doUpload())
                .on("fileuploaded", function (event, data, previewId, index) {
                    // 文件上传成功
                    const result = data.response
                    if (+result.code == +web_status.SUCCESS) {
                        $('input[name=fileUrl]').val(result.url)
                        $('input[name=host]').val(result.host)
                    } else {
                        $.modal.alertError(result.msg);
                    }
                }).on("filesuccessremove", function (event, data, previewId, index) {
    console.log('------filesuccessremove---')
    console.log(`${data},${previewId},${index}`)
    clearUploadFile()
}).on("filebatchselected", function (event, data, previewId, index) {
    console.log('------filebatchselected---')
    console.log(data)
    console.log(index)
});

function doUpload() {
    return function (event, data) {//选择即上传
        if (!!!data[0]) {
            $(this).fileinput("upload") // 上传文件
        }
    };
}

$('.kv-file-remove').click(function () {
    const title = $(this).parent().parent().parent().parent().find('.file-footer-caption').attr('title')

    console.log(`>>>>>>移除文件`)
    console.log(`fileUrl:${title}`)
})

$('.fileinput-remove-button').click(function () {
    console.log(`>>>>>>移除文件`)
    clearUploadFile()
})

function clearUploadFile() {
    $('input[name=fileUrl]').val("")
    $('input[name=host]').val("")
}