Bootstrap 之 bootstrap-fileinput 选择完文件后自动上传、修改预览区默认的初始文字描述、编辑回显删除文件、限制文件上传数量、移除预览图的功能按钮

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

 
 

属性介绍

属性	类型	默认值	描述
language	String	'en'	多语言设置，使用时需提前引入locales文件夹下对应的语言文件，中文zh，引入语言文件必须放在fileinput.js之后
showCaption	Boolean	true	是否显示被选文件的简介
showBrowse	Boolean	true	是否显示浏览按钮
showPreview	Boolean	true	是否显示预览区域
showRemove	Boolean	true	是否显示移除按钮
showUpload	Boolean	true	是否显示上传按钮
showCancel	Boolean	true	是否显示取消按钮
showClose	Boolean	true	是否显示关闭按钮
showUploadedThumbs	Boolean	true	这个属性是基于这样一个使用方法的：选择若干个文件后点击右下角上传按钮批量上传，待全部完成后再选择一批文件，此时之前上传成功的文件是否要保存。就是这个属性控制的。注意，点击文件缩略图下面的上传按钮不会导致之前的成功上传的文件消失，即使这里设置了true
browseOnZoneClick	Boolean	false
autoReplace	Boolean	false	是否自动替换当前图片，设置为true时，再次选择文件， 会将当前的文件替换掉。
generateFileId	Object	null
previewClass	String	空	添加预览按钮的类属性
captionClass	String	空	添加标题类属性
frameClass	String	'krajee-default'	针对每个缩略图的框架
mainClass	String	'file-caption-main'	针对元素类属性
mainTemplate	Object	null
purifyHtml	Boolean	true
fileSizeGetter	Object	null
initialCaption	String	空
initialPreview	Array/Object	[]	通过这个参数，我们可以为文件区设置一些默认的缩略图
initialPreviewDelimiter	String	'$$'
initialPreviewAsData	Boolean	false
initialPreviewFileType	String	'image'
initialPreviewConfig	Array/Object	[]
initialPreviewThumbTags	Array/Object	[]
previewThumbTags	Object	{}
initialPreviewShowDelete	Boolean	true
removeFromPreviewOnError	Boolean	false
deleteUrl	String	空	删除图片时的请求路径
deleteExtraData	Object	{}	删除图片时额外传入的参数
overwriteInitial	Boolean	true
previewZoomButtonIcons	Object	{prev: '',next: '',toggleheader: '',fullscreen: '',borderless: '',close: ''},
previewZoomButtonClasses	Object	{prev: 'btn btn-navigate',next: 'btn btn-navigate',toggleheader: 'btn btn-default btn-header-toggle',fullscreen: 'btn btn-default',borderless: 'btn btn-default',close: 'btn btn-default'},
preferIconicPreview	Boolean	false
preferIconicZoomPreview	Boolean	false
allowedPreviewTypes	undefined	undefined
allowedPreviewMimeTypes	Object	null
allowedFileTypes	Object	null	接收的文件后缀，如['jpg', 'gif', 'png'],不填将不限制上传文件后缀类型
allowedFileExtensions	Object	null	指出带有哪些后缀名的文件才是被接受上传的，设置msgInvalidFileExtension可以个性化出现此错误时的错误信息
defaultPreviewContent	Object	null
customLayoutTags	Object	{}
customPreviewTags	Object	{}
layoutTemplates	Object	{actionUpload: '',actionZoom: '',actionDownload: '',actionDelete: ''}	渲染布局的每个部分的模板配置
previewFileIcon	String	空	当文件无法被预览时出现在缩略图中的图标，默认是
previewFileIconClass	String	'file-other-icon'
previewFileIconSettings	Object	{}	可以将不同的后缀的文件有不同的缩略图图标
previewFileExtSettings	Object	{}
buttonLabelClass	String	'hidden-xs'
browseIcon	String	空
browseClass	String	'btn btn-primary'	指出了右下角选择按钮的样式。一般尽量不要用btn-sm和btn-lg，会和左边的输入框不协调
removeIcon	String	空	删除按钮相关的属性
removeClass	String	'btn btn-default'
cancelIcon	String	空
cancelClass	String	'btn btn-default'
uploadIcon	String	空	上传按钮相关的属性
uploadClass	String	'btn btn-default'
uploadUrl	String	null	上传文件路径
uploadAsync	boolean	true	是否为异步上传
uploadExtraData	Object	{}	上传文件时额外传递的参数设置
zoomModalHeight	number	480
minImageWidth	String	null	图片的最小宽度
minImageHeight	String	null	图片的最小高度
maxImageWidth	String	null	图片的最大宽度
maxImageHeight	String	null	图片的最大高度
resizeImage	Boolean	false
resizePreference	String	'width'
resizeQuality	number	0.92
resizeDefaultImageType	String	'image/jpeg'
minFileSize	number	0	单位为kb，上传文件的最小大小值
maxFileSize	number	0	单位为kb，如果为0表示不限制文件大小
resizeDefaultImageType	number	25600(25MB)
minFileCount	number	0	表示同时最小上传的文件个数
maxFileCount	number	0	表示允许同时上传的最大文件个数
validateInitialCount	Boolean	false
msgValidationErrorClass	String	'text-danger'
msgValidationErrorIcon	String	空
msgErrorClass	String	'file-error-message'
progressThumbClass	String	"progress-bar progress-bar-success progress-bar-striped active"
rogressClass	String	"progress-bar progress-bar-success progress-bar-striped active"
progressCompleteClass	String	"progress-bar progress-bar-success"
progressErrorClass	String	"progress-bar progress-bar-danger"
progressUploadThreshold	number	99
previewFileType	String	'image'	预览文件类型,内置['image', 'html', 'text', 'video', 'audio', 'flash', 'object',‘other‘]等格式
elCaptionContainer	String	null
elCaptionText	String	null	设置标题栏提示信息
elPreviewContainer	String	null
elPreviewImage	String	null
elPreviewStatus	String	null
elErrorContainer	String	null
errorCloseButton	String	× '
slugCallback	function	null	选择后未上传前 回调方法
dropZoneEnabled	Boolean	true	是否显示拖拽区域
dropZoneTitleClass	String	'file-drop-zone-title'	拖拽区域类属性设置
fileActionSettings	Object	{}	设置预览图片的显示样式
otherActionButtons	String	空	编码设置
textEncoding	String	'UTF-8'
ajaxSettings	Object	{}
ajaxDeleteSettings	Object	{}
showAjaxErrorDetails	Boolean	true

Method 方法介绍

方法名	描述
fileerror	异步上传错误结果处理$('#uploadfile').on('fileerror', function(event, data, msg) {});
fileuploaded	异步上传成功结果处理$("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {})
filebatchuploaderror	批量上传错误结果处理$('#uploadfile').on('filebatchuploaderror', function(event, data, msg) {});
filebatchuploadsuccess	批量上传成功结果处理$('#uploadfile').on('filepreupload', function(event, data, previewId, index) {});
filebatchselected	选择文件后处理事件$("#fileinput").on("filebatchselected", function(event, files) {});
upload	文件上传方法$("#fileinput").fileinput("upload");
fileuploaded	上传成功后处理方法$("#fileinput").on("fileuploaded", function(event, data, previewId, index) {});
filereset	Possible values: http, https, ws, wss.
fileclear	点击浏览框右上角X 清空文件前响应事件$("#fileinput").on("fileclear",function(event, data, msg){});
filecleared	点击浏览框右上角X 清空文件后响应事件 $("#fileinput").on("filecleared",function(event, data, msg){});
fileimageuploaded	在预览框中图片已经完全加载完毕后回调的事件
fileremoved	点击移除后的回调事件 $("#fileinput").on("fileremoved", function (event, id, index) {}
filebeforedelete	编辑回显（原图片的）直接点的预览区删除按钮删除之前的回调事件（注意组装图片配置的删除url必填，可为空方法，传递的参数key绑定的值就是回调函数的参数key） $("#fileinput").on("filebeforedelete", function (event, key) {}
filepredelete	编辑回显（原图片的）直接点的预览区删除按钮的回调事件（注意组装图片配置的删除url必填，可为空方法，传递的参数key绑定的值就是回调函数的参数key） $("#fileinput").on("filepredelete", function (event, key, jqXHR, data) {}
filedeleted	编辑回显（原图片的）直接点的预览区删除按钮的回调事件（注意组装图片配置的删除url必填，可为空方法，传递的参数key绑定的值就是回调函数的参数key） $("#fileinput").on("filedeleted", function (event, key) {}
filesuccessremove	上传完成之后的预览区（新增图片的）删除按钮回调事件 $("#fileinput").on("filesuccessremove", function (event, data, previewId) {}

 
 

使用

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

 

$(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)
    })
    
    // ---------------------------------------上传相关功能结束-------------------------------------------------
}

 
 

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