Bootstrap FileInput插件的使用整理

下载地址、API和DOM地址

下载地址：GitHub - kartik-v/bootstrap-fileinput: An enhanced HTML 5 file input for Bootstrap 5.x/4.x./3.x with file preview, multiple selection, and more features.
API文档 ：Bootstrap File Input - © Kartik
D E M O：Bootstrap File Input Demo - © Kartik

---

一、引入文件

 二、初始化设置

//初始化fileinput
initFileInput(); 
function initFileInput() {
   var url = [];
   url.push("../UploadArticle/" + oldurl);
    $("#uploadImg").fileinput({
        language: 'zh', //设置语言
        dropZoneTitle: '可以将图片拖放到这里 …支持多文件上传',
        uploadUrl: abp.appPath + 'Articles/UploadFileEdit', //上传的地址
        uploadExtraData: function(previewId, index) {   //该插件可以向您的服务器方法发送附加数据。这可以通过uploadExtraData在键值对中设置为关联数组对象来完成。所以如果你有设置uploadExtraData={id:'kv-1'}，在PHP中你可以读取这些数据$_POST['id']
            var id = $('#id').val();
            return {seriesId: id};
        },
        allowedFileExtensions: ['jpg','png'],//接收的文件后缀
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove: true, //显示移除按钮
        showPreview: true, //是否显示预览
        showCancel:true,   //是否显示文件上传取消按钮。默认为true。只有在AJAX上传过程中，才会启用和显示
        showCaption: true,//是否显示文件标题，默认为true
        browseClass: "btn btn-primary", //文件选择器/浏览按钮的CSS类。默认为btn btn-primary
        dropZoneEnabled: true,//是否显示拖拽区域
        minImageWidth: 50, //图片的最小宽度
        minImageHeight: 50,//图片的最小高度
        maxImageWidth: 1000,//图片的最大宽度
        maxImageHeight: 1000,//图片的最大高度
        maxFileSize: 1024,//单位为kb，如果为0表示不限制文件大小
        minFileCount: 1, //每次上传允许的最少文件数。如果设置为0，则表示文件数是可选的。默认为0
        maxFileCount: 0, //每次上传允许的最大文件数。如果设置为0，则表示允许的文件数是无限制的。默认为0
        //编辑时初始加载预览图片配置开始
        'initialPreviewAsData': true,
        'initialPreviewFileType': 'image',//预览类型
        'initialPreview': url,//预览图片地址，多文件是数组形式
        'initialPreviewConfig': {
              'caption': oldurl, // 展示的文件名，多文件数组形式
              'width': '120px',
              'style': 'max-width:100%;max-height:100%;',
              'downloadurl': "", // 下载url
              'url': abp.appPath + 'Articles/UploadFileDel',
              'key': Id, // 删除是Ajax向后台传递的参数,
              'type': 'image' // 预览文件类型
             },//初始化时config
        //编辑时初始加载预览图片配置结束
        previewFileIcon: "",//当检测到用于预览的不可读文件类型时，将在每个预览文件缩略图中显示的图标。默认为  
        layoutTemplates:{
            actionUpload:''//去除上传预览缩略图中的上传图片
            actionZoom:'',   //去除上传预览缩略图中的查看详情预览的缩略图标
            actionDownload:'' //去除上传预览缩略图中的下载图标
            actionDelete:'', //去除上传预览的缩略图中的删除图标
        },//对象用于渲染布局的每个部分的模板配置。您可以设置以下模板来控制窗口小部件布局.eg:去除上传图标
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",//字符串，当文件数超过设置的最大计数时显示的消息 maxFileCount。默认为：选择上传的文件数（{n}）超出了允许的最大限制{m}。请重试您的上传！
    }).on('filebatchpreupload', function(event, data) { //该方法将在上传之前触发
        var id = $('#id option:selected').val();
        if(id == 0){
            return {
                message: "请选择", // 验证错误信息在上传前要显示。如果设置了这个设置，插件会在调用时自动中止上传，并将其显示为错误消息。您可以使用此属性来读取文件并执行自己的自定义验证
                data:{} // any other data to send that can be referred in `filecustomerror`
            };
        }
    });
}

//异步上传返回结果处理
$('#uploadImg').on('fileerror', function(event, data, msg) {
            console.log(data.id);
            console.log(data.index);
            console.log(data.file);
            console.log(data.reader);
            console.log(data.files);
            // get message
            alert(msg);

});
//异步上传返回结果处理
//fileuploaded此事件仅针对ajax上传触发，并在每个缩略图文件上传完成后触发。此事件仅针对ajax上传并在以下情况下触发：当点击每个预览缩略图中的上传图标并且文件上传成功时，或者当你有 uploadAsync设置为true您已触发批量上传。在这种情况下，fileuploaded每一个人选择的文件被上传成功后，触发事件。
var id_str = '';
$("#uploadImg").on("fileuploaded", function (event, data, previewId, index) {
               console.log(data.id);
               console.log(data.index);
               console.log(data.file);
               console.log(data.reader);
               console.log(data.files);

                var obj = data.response;
                if(typeof(data.response.id) != 'undefined'){
                     id_str = id_str+data.response.id+',';
                }
                alert(JSON.stringify(data.success));
                
            });

//同步上传错误处理
       $('#uploadImg').on('filebatchuploaderror', function(event, data, msg) {
            console.log(data.id);
            console.log(data.index);
            console.log(data.file);
            console.log(data.reader);
            console.log(data.files);
            // get message
            alert(msg);
         });
   //同步上传返回结果处理
   $("#uploadImg").on("filebatchuploadsuccess", function (event, data, previewId, index) {
           console.log(data.id);
               console.log(data.index);
               console.log(data.file);
               console.log(data.reader);
               console.log(data.files);
                var obj = data.response;
                alert(JSON.stringify(data.success));
      });

//上传前

$('#uploadImg').on('filepreupload', function(event, data, previewId, index) {
        var form = data.form, files = data.files, extra = data.extra,
            response = data.response, reader = data.reader;
        console.log('File pre upload triggered');
    });


经查资料得知，异步上传处理错误和返回结果要处理fileerror和fileuploaded方法；同步上传处理错误和返回结果filebatchuploaderror和filebatchuploadsuccess方法

// filebatchuploadcomplete此事件仅在ajax上传和完成同步或异步ajax批量上传后触发。
$('#uploadImg').on('filebatchuploadcomplete',function (event,files,extra) {
    if(id_str.length == 0){
        layer.msg('上传失败', {icon: 0});//弹框提示
        return false;
    }
    setTimeout(function(){ //执行延时关闭
        closeSelf();
    },1000);
});

1. Options 说明：

属性名	属性类型	描述说明	默认值
zoomModalHeight	number		480
validateInitialCount	boolean		FALSE
uploadUrl	String		上传文件路径
uploadIcon	String		''
uploadExtraData	上传文件时额外传递的参数设置		{}
uploadClass	String		‘btn btn-default’
uploadAsync	boolean	是否为异步上传	TRUE
textEncoding	String	编码设置	‘UTF-8’
slugCallback	String		null
showUploadedThumbs	Boolean		TRUE
showUpload	Boolean	是否显示上传按钮	true,
showRemove	Boolean	是否显示移除按钮	true,
showPreview	Boolean	是否显示预览区域	TRUE
showClose:	Boolean	是否显示关闭按钮	TRUE
showCaption	Boolean	是否显示被选文件的简介	TRUE
showCancel	Boolean	是否显示取消按钮	true,
showBrowse	Boolean	是否显示浏览按钮	TRUE
showAjaxErrorDetails	boolean
rogressClass	String		"progress-bar progress-bar-success progress-bar-striped active"
resizeQuality	number		0.92
resizePreference	String		‘width’
resizeImage	boolean		FALSE
resizeDefaultImageType	String		‘image/jpeg’
resizeDefaultImageType	number		25600(25MB)
removeIcon	String		''
removeFromPreviewOnError	Boolean		FALSE
removeClass	String		‘btn btn-default’
purifyHtml	Boolean		TRUE
progressUploadThreshold	number		99
progressThumbClass	String		"progress-bar progress-bar-success progress-bar-striped active"
progressErrorClass	String		"progress-bar progress-bar-danger"
progressCompleteClass	String		"progress-bar progress-bar-success"
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'},
previewThumbTags	Object		{}
previewFileType	String	预览文件类型,内置[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’,‘other‘]等格式	‘image’
previewFileIconSettings	Object		{}
previewFileIconClass	String		‘file-other-icon’
previewFileIcon	String		''
previewFileExtSettings	Object		{}
previewClass	String	添加预览按钮的类属性	‘’
preferIconicZoomPreview	Boolrean		FALSE
preferIconicPreview	Boolrean		FALSE
overwriteInitial	Boolean		TRUE
otherActionButtons	String		”
msgValidationErrorIcon	String		' '
msgValidationErrorClass	String		‘text-danger’
msgErrorClass	String		‘file-error-message’
minImageWidth	String	图片的最小宽度	null
minImageHeight	String	图片的最小高度	null
minFileSize	number	单位为kb，上传文件的最小大小值	0
minFileCount	number	表示同时最小上传的文件个数	0
maxImageWidth	String	图片的最大宽度	null
maxImageHeight	String	图片的最大高度	null
maxFileSize	number	单位为kb，如果为0表示不限制文件大小	0
maxFileCount	number	表示允许同时上传的最大文件个数	0
mainTemplate	Object		null
mainClass	String		‘file-caption-main’
language	String	多语言设置，使用时需提前引入\locales文件夹下对应的语言文件，中文zh，引入语言文件必须放在fileinput.js之后	‘en’
initialPreviewThumbTags	Array/Object		[]
initialPreviewShowDelete	Boolean		TRUE
initialPreviewFileType	String		‘image’
initialPreviewDelimiter	String		'*$$*'
initialPreviewConfig	Array/Object		[]
initialPreviewAsData	Boolean		FALSE
initialPreview	Array/Object		[]
initialCaption	String		”
generateFileId	Object		null
frameClass	String		‘krajee-default’
fileSizeGetter	Object		null
fileActionSettings	Object	详见附录1.1	{}
errorCloseButton	String		'×'
elPreviewStatus	String		null
elPreviewImage	String		null
elPreviewContainer	String		null
elErrorContainer	String		null
elCaptionText	String	设置标题栏提示信息	null
elCaptionContainer	String		null
dropZoneTitleClass	String	拖拽区域类属性设置	‘file-drop-zone-title’
dropZoneEnabled	boolean	是否显示拖拽区域	TRUE
deleteUrl	String	删除图片时的请求路径	”
deleteExtraData	Object	删除图片时额外传入的参数	{}
defaultPreviewContent	Object		null
customPreviewTags	Object		{}
customLayoutTags	Object		{}
captionClass	String		‘’
cancelIcon	String		''
cancelClass	String		‘btn btn-default’
buttonLabelClass	String		‘hidden-xs’
browseOnZoneClick	Boolean		FALSE
browseIcon	String		' '
browseClass	String		‘btn btn-primary’
autoReplace	Boolean	是否自动替换当前图片，设置为true时，再次选择文件，会将当前的文件替换掉。	FALSE
allowedPreviewTypes	Object	你可以通过这个字段配置你允许可以被展示成缩略图的文件类型，默认值是[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’] 。因此所有类型的文件默认都会被当成一个object来展示。如果你想只显示图片和视频的缩略图，你可以设置这个字段为[‘image’, ‘video’] 。如果你想进制所有文件类型的内容缩略图并且只显示 previewIcon 而非小图，你可以设置这个字段的值为null，空，或者false。	[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’]
allowedPreviewMimeTypes	Object		null
allowedFileTypes	Object	接收的文件后缀，如[‘jpg’, ‘gif’, ‘png’],不填将不限制上传文件后缀类型	null
allowedFileExtensions	Object		null
ajaxSettings	Object		{}
ajaxDeleteSettings	Object		{}

1.1 fileActionSettings 说明：

属性名	属性类型	描述说明	默认值
dragClass	string	每个文件缩略图中的拖动按钮的CSS类(在初始预览中排序/重新排列项目)
dragIcon	string	每个文件缩略图中拖动按钮的图标(在初始预览中排序/重新排列项目)
dragSettings	object	排序插件的配置
dragTitle	string	每个文件缩略图中拖拽按钮的标题(在初始预览中排序/重新排列项目)
indicatorError	string	每个文件缩略图中显示的上传错误的指示符(HTML标记)
indicatorErrorTitle	string	每个文件缩略图上显示错误的提示标题
indicatorLoading	string	每个文件缩略图中显示的正在进行的上传的指示符(HTML标记)
indicatorLoadingTitle	string	每个文件缩略图上的上传状态标题
indicatorNew	string	每个文件缩略图中显示的新挂载上传的指示符(HTML标记)
indicatorNewTitle	string	每个文件缩略图上显示新加载的标题
indicatorSuccess	string	每个文件缩略图中显示成功上传的一个指示符(HTML标记)
indicatorSuccessTitle	string	每个文件缩略图上显示成功上传的标题
removeClass	string	每个文件缩略图中删除按钮的CSS类
removeIcon	string	每个文件缩略图中显示删除按钮图标
removeTitle	string	每个文件缩略图中删除按钮的标题
showDrag	boolean	是否在缩略图中显示拖拽按钮(仅适用于初始预览内容)
showRemove	boolean	是否在缩略图中显示删除按钮

2.Method说明：

方法名	示例	描述
disable	$(‘#input-id’).fileinput(‘disable’);	禁用
enable	$(‘#input-id’).fileinput(‘enable’);	允许
reset	$(‘#input-id’).fileinput(‘reset’);	清除预览缩略图(除了成功上传和初始预览)，并清理ajax上传文件堆栈,但不能清除本地已选择的文件
destroy	$(‘#input-id’).fileinput(‘destroy’);	销毁插件,恢复原生上传文件输入框
refresh	$(‘#input-id’).fileinput(‘refresh’, {showCaption: false})	刷新插件,支持设置参数
clear	$(‘#input-id’).fileinput(‘clear’);	清除预览缩略图(除了成功上传和初始预览)，并清理ajax上传文件堆栈跟本地已经选择的文件。该方法比 reset 方法清除层次要更深入，主预览按钮旁边的删除按钮就是调用该方法
upload	$(‘#input-id’).fileinput(‘clear’);	触发ajax上传,参数 uploadUrl 必须设置才能生效
cancel	$(‘#input-id’).fileinput(‘cancel’);	取消正在通过ajax上传的操作
lock	$(‘#input-id’).fileinput(‘lock’);	禁用所有操作/按钮来锁定文件上传,不包括 取消 按钮
unlock	$(‘#input-id’).fileinput(‘unlock’);	解除所有禁用操作/按钮状态,lock方法的反向方法。一般与 lock 方法配对使用
addToStack	$(‘#input-id’).fileinput(‘addToStack’, fileObj);	将一个文件对象推到缓存的文件堆栈数组中，以便上传. 参数必须是一个文件对象
updateStack	$(‘#input-id’).fileinput(‘updateStack’, index, fileObj);	更新或覆盖文件堆栈数组中指定数组索引的文件对象。参数1: 数组索引；参数2: 文件对象
clearStack	$(‘#input-id’).fileinput(‘clearStack’);	清除整个文件上传堆栈
getFileStack	var files = $(‘#input-id’).fileinput(‘getFileStack’);	返回已选择的文件对象数组(仅适用于ajax上传)。此方法不会返回验证错误或已上传的文件
getFilesCount	var filesCount = $(‘#input-id’).fileinput(‘getFilesCount’);	返回所有已上传文件和预览列表文件(待上传)的数量