照例：附上地址 https://github.com/kartik-v/bootstrap-fileinput

属性介绍

Method 方法介绍

使用

详细的使用方法查看代码注释

$(document).ready(function () {

    // ---------------------------------------上传相关功能开始-------------------------------------------------
    /**
     * 获取初始化文件
     * @param files 后台返回的文件url字符串，多文件逗号隔开
     * @returns {{initPreviewConfig: any[], preList: any[]}}
     */
    function getInitFiles(files) {
        // 创建两个数组用来保存图片和图片配置
        let preList = new Array(); // 图片数组
        let initPreviewConfig = new Array(); // 图片配置数组

        if(files != null) {
            let fileList = files.split(','); // 因为多张图片是以逗号分隔，所以拆开
            for(let i = 0; i < fileList.length; i++) {	// 这里遍历图片列表

                preList.push('<img src="' + fileList[i] + '">')	// 组装图片

                //组装图片配置
                let configItem = {
                    caption: (i+1) + '.png', // 展示的文件名
                    url: '/api/deleteImage', // 删除url，必填，可以写一个空方法，不然无法删除初始化图片
                    // key: fileList[i], // 删除时Ajax向后台传递的参数
                    // extra: function() {
                    //     return { id }
                    // }
                };
                initPreviewConfig.push(configItem);
            }
        }
        return { preList, initPreviewConfig }
    }


	/**
	 * 初始化上传组件
	 * @param id 上传组件绑定的input id
	 * @param maxFileCount 允许上传的文件数量
	 * @param autoReplace 是否自动替换当前图片
	 * @param previewOption 组件初始化图片：initialPreview，initialPreviewConfig；已封装方法：getInitFiles
	 * @param callBack 回调函数，参数上传成功时的data
	 */
	function initUpload(id, maxFileCount, autoReplace, previewOption, callBack) {
	    let url = maxFileCount == 1 ? "api/image/uploadImage" : "api/image/uploadImages"
	    let fileInputOption = {
	        uploadUrl: url,
	        maxFileCount: maxFileCount, // 允许上传的文件数量
	        uploadAsync: maxFileCount == 1 ? true : false, // 是否异步上传
	        autoReplace: true, // 是否自动替换当前图片
	        showCaption: false, // 是否显示标题
	        showUpload: false, // 是否显示上传按钮
	        showRemove: false, // 是否显示移除按钮
	        layoutTemplates: {
				// actionDelete: '', // 去除上传预览的缩略图中的删除图标
                actionUpload: '', // 去除上传预览缩略图中的上传图片；
                actionZoom: '', // 去除上传预览缩略图详情的图标
                actionDownload: '' // 去除上传预览缩略图中的下载图标
			}, // 渲染布局的每个部分的模板配置
	        allowedFileExtensions: ['jpg', 'png', 'jpeg'], // 允许上传的文件扩展
	        msgInvalidFileExtension: "只支持jpg、png、jpeg 格式，请重新选择！",
	        maxFileSize: 5120, // 允许上传的最大值文件大小，这里设置成 5M 大小
	        initialPreview: previewOption.preList,		// 初始化图片
	        initialPreviewConfig: previewOption.initPreviewConfig,
	        dropZoneTitle: `拖拽文件或者点击下方选择按钮...<br/><b style="color: black;">之后记得点击上传完成上传</b>`, // 预览区的初始文字描述
	        uploadExtraData: function () {   //向后台传递的附带参数
                const data = {
                    id: "10000",
                    msg: "这里可以添加参数"
                }
                return data
            }
        }
	    let eventType = maxFileCount == 1 ? 'fileuploaded' : 'filebatchuploadsuccess'
	    $("#" + id).fileinput(fileInputOption).on('filebatchselected', function (event, files) {
	        // 选择图片后执行，
	        // 用于判断选择的图片是否超出限制，超出限制就禁用选择按钮
		    // 比如只允许上传4张，我分两次上传，第一次上传两张，第二次上传3张，此时手动禁用选择按钮
	        $("#" + event.currentTarget.id).parent().prev().css('display', 'inline-block')
	        let vals = $("." + event.currentTarget.id).val()
	        let valsLen = vals ? vals.split(',').length : 0
	        let fileCount = Object.keys(files).length
	        if((valsLen + fileCount) >= maxFileCount) {
	        	// 超过限制的文件数量，选择按钮禁止点击
	            $("#" + event.currentTarget.id).attr('disabled', 'disabled') 
	        }
	        $(this).fileinput('upload') // 选择完文件后自动上传
	    }).on('filebatchuploadcomplete', function (event, files) {
	        // 只会调用一次，所有图片都上传成功调用，这是为了弥补上传成功后部分DOM结构重新渲染，导致filebatchselected钩子中执行的操作失效
	        let vals = $("." + event.currentTarget.id).val()
	        let valsLen = vals ? vals.split(',').length : 0
	        let fileCount = Object.keys(files).length
	        if((valsLen + fileCount) >= maxFileCount) {
	        	// 超过限制的文件数量，选择按钮禁止点击
	            $("#" + event.currentTarget.id).attr('disabled', 'disabled')
	        }
	    }).on(eventType, function (event, data, previewId, index) {
	    	// 上传成功后的事件
	        if (typeof callBack == "function") {
	            callBack(data);
	        }
	    }).on("fileremoved", function (event, id, index) { // 点击移除后的回调，注意的是这个是选择完文件还没有上传才会调用的回调
	        $("input[name='" + event.currentTarget.id + "']").val("")
	        // 移除后恢复选择按钮的点击事件
	        $("#" + event.currentTarget.id).removeAttr('disabled')
	    }).on("filecleared", function (event, data, msg) { // 点击右上角×后的回调
	        $("." + event.currentTarget.id).val("")
	        // 移除后恢复选择按钮的点击事件
	        $("#" + event.currentTarget.id).removeAttr('disabled')
	    }).on('filebeforedelete', function(event, key) { // 上传完成之后的预览区删除按钮的回调事件
            alert("删除成功11")
        }).on("filesuccessremove", function (event, data, previewId, index) { // 编辑回显直接点的预览区删除按钮的回调事件
            alert("删除成功22")
        })
	}

	// files 后台返回的文件url字符串，多文件逗号隔开
    initUpload('inputFile', 1, true, getInitFiles(files), (data) => {
        let fileUrl = data.response.returndata
        let fileVal = $('.inputFile').val()
        let newVal = fileVal ? fileVal + ',' + fileUrl : fileUrl
        $('.iconFile').val(newVal)
    })
    
    // ---------------------------------------上传相关功能结束-------------------------------------------------
}

如有不足，望大家多多指点！ 谢谢！