文件上傳控制項bootstrap-fileinput的使用

屬性名

屬性類型

描述說明

預設值

language

String

多語言設置，使用時需提前引入\locales文件夾下對應的語言文件，

中文zh，引入語言文件必須放在fileinput.js之後

'en'

showCaption

Boolean

是否顯示被選文件的簡介

true

showBrowse

Boolean

是否顯示瀏覽按鈕

true

showPreview

Boolean

是否顯示預覽區域

true

showRemove

Boolean

是否顯示移除按鈕

true,

showUpload

Boolean

是否顯示上傳按鈕

true,

showCancel

Boolean

是否顯示取消按鈕

true,

showClose:

Boolean

是否顯示關閉按鈕

true

showUploadedThumbs

Boolean

true

browseOnZoneClick

Boolean

false

autoReplace

Boolean

是否自動替換當前圖片，設置為true時，再次選擇文件，

會將當前的文件替換掉。

false

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: '<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'

},

preferIconicPreview

Boolrean

false

preferIconicZoomPreview

Boolrean

false

allowedPreviewTypes

undefined

undefined

allowedPreviewMimeTypes

Object

null

allowedFileTypes

Object

接收的文件尾碼，如['jpg', 'gif', 'png'],不填將不限制上傳文件尾碼類型

null

allowedFileExtensions

Object

null

defaultPreviewContent

Object

null

customLayoutTags

Object

{}

customPreviewTags

Object

{}

previewFileIcon

String

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

previewFileIconClass

String

'file-other-icon'

previewFileIconSettings

Object

{}

previewFileExtSettings

Object

{}

buttonLabelClass

String

'hidden-xs'

browseIcon

String

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

browseClass

String

'btn btn-primary'

removeIcon

String

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

removeClass

String

'btn btn-default'

cancelIcon

String

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

cancelClass

String

'btn btn-default'

uploadIcon

String

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

uploadClass

String

'btn btn-default'

uploadUrl

String

上傳文件路徑

null

uploadAsync

boolean

是否為非同步上傳

true

uploadExtraData

上傳文件時額外傳遞的參數設置

{}

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

單位為kb，上傳文件的最小大小值

0

maxFileSize

number

單位為kb，如果為0表示不限制文件大小

0

resizeDefaultImageType

number

25600(25MB)

minFileCount

number

表示同時最小上傳的文件個數

0

maxFileCount

number

表示允許同時上傳的最大文件個數

0

validateInitialCount

boolean

false

msgValidationErrorClass

String

'text-danger'

msgValidationErrorIcon

String

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

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', 'html', 'text', 'video', 'audio', 'flash', 'object',‘other‘]等格式

'image'

elCaptionContainer

String

null

elCaptionText

String

設置標題欄提示信息

null

elPreviewContainer

String

null

elPreviewImage

String

null

elPreviewStatus

String

null

elErrorContainer

String

null

errorCloseButton

String

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

slugCallback

String

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

方法名

參數

描述

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

fileclear

點擊瀏覽框右上角X 清空文件前響應事件

$("#fileinput").on("fileclear",function(event, data, msg){

});

filecleared

點擊瀏覽框右上角X 清空文件後響應事件

$("#fileinput").on("filecleared",function(event, data, msg){

});

fileimageuploaded

在預覽框中圖片已經完全載入完畢後回調的事件