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

一、引入文件

<link href="../css/bootstrap.min.css"rel="stylesheet">
<link href="../css/fileinput.css" media="all"rel="stylesheet" type="text/css" />
<scriptsrc="../js/jquery-2.0.3.min.js"></script>
<script src="../js/fileinput.js"type="text/javascript"></script>
<script src="../js/bootstrap.min.js"type="text/javascript"></script>

 二、初始化设置

//初始化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: "<i class='glyphicon glyphicon-king'></i>",//当检测到用于预览的不可读文件类型时，将在每个预览文件缩略图中显示的图标。默认为<i class="glyphicon glyphicon-file"></i>  
        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

'<i class="glyphicon glyphicon-upload"></i>'

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

'<i class="glyphicon glyphicon-trash"></i>'

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: '<i class="glyphicon glyphicon-triangle-left"></i>',next: '<i class="glyphicon glyphicon-triangle-right"></i>',toggleheader: '<i class="glyphicon glyphicon-resize-vertical"></i>',fullscreen: '<i class="glyphicon glyphicon-fullscreen"></i>',borderless: '<i class="glyphicon glyphicon-resize-full"></i>',close: '<i class="glyphicon glyphicon-remove"></i>'},

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

'<i class="glyphicon glyphicon-file"></i>'

previewFileExtSettings

Object

{}

previewClass

String

添加预览按钮的类属性

‘’

preferIconicZoomPreview

Boolrean

FALSE

preferIconicPreview

Boolrean

FALSE

overwriteInitial

Boolean

TRUE

otherActionButtons

String

”

msgValidationErrorIcon

String

'<i class="glyphicon glyphicon-exclamation-sign"></i> '

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

'<span class="close kv-error-close">&times;</span>'

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

'<i class="glyphicon glyphicon-ban-circle"></i>'

cancelClass

String

‘btn btn-default’

buttonLabelClass

String

‘hidden-xs’

browseOnZoneClick

Boolean

FALSE

browseIcon

String

'<i class="glyphicon glyphicon-folder-open"></i>&nbsp;'

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’);

返回所有已上传文件和预览列表文件(待上传)的数量

版权声明：本文为daiyue945原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。