Bootstrap FileInput中文API整理

这段时间做项目用到bootstrap fileinput插件上传文件，在用的过程中，网上能查到的api都不是很全，所以想着整理一份比较详细的文档，方便自己今后使用，也希望能给大家带来帮助，如有错误，希望大家积极指正。

一、    引入文件

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

二、    初始化设置：

$("#uploadfile").fileinput({

language: 'zh', //设置语言

uploadUrl:"http://127.0.0.1/testDemo/fileupload/upload.do", //上传的地址

allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀

//uploadExtraData:{"id": 1, "fileName":'123.mp3'},

uploadAsync: true, //默认异步上传

showUpload:true, //是否显示上传按钮

showRemove :true, //显示移除按钮

showPreview :true, //是否显示预览

showCaption:false,//是否显示标题

browseClass:"btn btn-primary", //按钮样式

dropZoneEnabled: false,//是否显示拖拽区域

//minImageWidth: 50, //图片的最小宽度

//minImageHeight: 50,//图片的最小高度

//maxImageWidth: 1000,//图片的最大宽度

//maxImageHeight: 1000,//图片的最大高度

//maxFileSize:0,//单位为kb，如果为0表示不限制文件大小

//minFileCount: 0,

maxFileCount:10, //表示允许同时上传的最大文件个数

enctype:'multipart/form-data',

validateInitialCount:true,

previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",

msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

}).on("fileuploaded", function (event, data, previewId, index){

});

三、    Options 说明：

属性名

属性类型

描述说明

默认值

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

设置预览图片的显示样式

{

showRemove: true,

showUpload: false,

showZoom: true,

showDrag: true,

removeIcon: '<i class="glyphicon glyphicon-trash text-danger"></i>',

removeClass: 'btn btn-xs btn-default',

removeTitle: 'Remove file',

uploadIcon: '<i class="glyphicon glyphicon-upload text-info"></i>',

uploadClass: 'btn btn-xs btn-default',

uploadTitle: 'Upload file',

zoomIcon: '<i class="glyphicon glyphicon-zoom-in"></i>',

zoomClass: 'btn btn-xs btn-default',

zoomTitle: 'View Details',

dragIcon: '<i class="glyphicon glyphicon-menu-hamburger"></i>',

dragClass: 'text-info',

dragTitle: 'Move / Rearrange',

dragSettings: {},

indicatorNew: '<i class="glyphicon glyphicon-hand-down text-warning"></i>',

indicatorSuccess: '<i class="glyphicon glyphicon-ok-sign text-success"></i>',

indicatorError: '<i class="glyphicon glyphicon-exclamation-sign text-danger"></i>',

indicatorLoading: '<i class="glyphicon glyphicon-hand-up text-muted"></i>',

indicatorNewTitle: 'Not uploaded yet',

indicatorSuccessTitle: 'Uploaded',

indicatorErrorTitle: 'Upload Error',

indicatorLoadingTitle: 'Uploading ...'

}

otherActionButtons

String

''

textEncoding

String

编码设置

'UTF-8'

ajaxSettings

Object

{}

ajaxDeleteSettings

Object

{}

showAjaxErrorDetails

boolean

true

四、    提示说明设置：

属性名

默认值

中文

fileSingle

file

文件

filePlural

files

个文件

browseLabel

Browse &hellip

选择 &hellip;

removeLabel

Remove

移除

removeTitle

Clear selected files

清除选中文件

cancelLabel

Cancel

取消

cancelTitle

Abort ongoing upload

取消进行中的上传

uploadLabel

Upload

上传

uploadTitle

Upload selected files

上传选中文件

msgNo

No

没有

msgNoFilesSelected

No files selected

“”

msgCancelled

Cancelled

取消

msgZoomModalHeading

Detailed Preview

详细预览

msgSizeTooSmall

File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.

File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.

msgSizeTooLarge

File "{name}" (<b>{size} KB</b>) exceeds maximum allowed upload size of <b>{maxSize} KB</b>.

文件 "{name}" (<b>{size} KB</b>) 超过了允许大小 <b>{maxSize} KB</b>.

msgFilesTooLess

You must select at least <b>{n}</b> {files} to upload.

你必须选择最少 <b>{n}</b> {files} 来上传.

msgFilesTooMany

Number of files selected for upload <b>({n})</b> exceeds maximum allowed limit of <b>{m}</b>.

选择的上传文件个数 <b>({n})</b> 超出最大文件的限制个数 <b>{m}</b>.

msgFileNotFound

File "{name}" not found!

文件 "{name}" 未找到!

msgFileSecured

Security restrictions prevent reading the file "{name}".

安全限制，为了防止读取文件 "{name}".

msgFileNotReadable

File "{name}" is not readable.

文件 "{name}" 不可读.

msgFilePreviewAborted

File preview aborted for "{name}".

取消 "{name}" 的预览.

msgFilePreviewError

An error occurred while reading the file "{name}".

读取 "{name}" 时出现了一个错误.

msgInvalidFileName

Invalid or unsupported characters in file name "{name}".

Invalid or unsupported characters in file name "{name}".

msgInvalidFileType

Invalid type for file "{name}". Only "{types}" files are supported.

不正确的类型 "{name}". 只支持 "{types}" 类型的文件.

msgInvalidFileExtension

Invalid extension for file "{name}". Only "{extensions}" files are supported.

不正确的文件扩展名 "{name}". 只支持 "{extensions}" 的文件扩展名.

msgFileTypes

{

'image': 'image',

'html': 'HTML',

'text': 'text',

'video': 'video',

'audio': 'audio',

'flash': 'flash',

'pdf': 'PDF',

'object': 'object'

},

{

'image': 'image',

'html': 'HTML',

'text': 'text',

'video': 'video',

'audio': 'audio',

'flash': 'flash',

'pdf': 'PDF',

'object': 'object'

},

msgUploadAborted

The file upload was aborted

该文件上传被中止

msgUploadThreshold

Processing...

Processing...

msgUploadBegin

Initializing...

Initializing...

msgUploadEnd

Done

Done

msgUploadEmpty

No valid data available for upload.

No valid data available for upload.

msgValidationError

Validation Error

验证错误

msgLoading

Loading file {index} of {files} &hellip;

加载第 {index} 文件 共 {files} &hellip;

msgProgress

Loading file {index} of {files} - {name} - {percent}% completed.

加载第 {index} 文件 共 {files} - {name} - {percent}% 完成.

msgSelected

{n} {files} selected

{n} {files} 选中

msgFoldersNotAllowed

Drag & drop files only! {n} folder(s) dropped were skipped.

只支持拖拽文件! 跳过 {n} 拖拽的文件夹.

msgImageWidthSmall

Width of image file "{name}" must be at least {size} px.

宽度的图像文件的"{name}"的必须是至少{size}像素.

msgImageHeightSmall

Height of image file "{name}" must be at least {size} px.

图像文件的"{name}"的高度必须至少为{size}像素.

msgImageWidthLarge

Width of image file "{name}" cannot exceed {size} px.

宽度的图像文件"{name}"不能超过{size}像素.

msgImageHeightLarge

Height of image file "{name}" cannot exceed {size} px.

图像文件"{name}"的高度不能超过{size}像素.

msgImageResizeError

Could not get the image dimensions to resize.

无法获取的图像尺寸调整。

msgImageResizeException

Error while resizing the image.<pre>{errors}</pre>

错误而调整图像大小。<pre>{errors}</pre>

msgAjaxError

Something went wrong with the {operation} operation. Please try again later!

Something went wrong with the {operation} operation. Please try again later!

msgAjaxProgressError

{operation} failed

{operation} failed

ajaxOperations

{

deleteThumb: 'file delete',

uploadThumb: 'file upload',

uploadBatch: 'batch file upload',

uploadExtra: 'form data upload'

},

{

deleteThumb: 'file delete',

uploadThumb: 'file upload',

uploadBatch: 'batch file upload',

uploadExtra: 'form data upload'

},

dropZoneTitle

Drag & drop files here &hellip;

拖拽文件到这里 &hellip;<br>支持多文件同时上传

dropZoneClickTitle

<br>(or click to select {files})

<br>(或点击{files}按钮选择文件)

previewZoomButtonTitles

{

prev: 'View previous file',

next: 'View next file',

toggleheader: 'Toggle header',

fullscreen: 'Toggle full screen',

borderless: 'Toggle borderless mode',

close: 'Close detailed preview'

}

{

prev: '预览上一个文件',

next: '预览下一个文件',

toggleheader: '缩放',

fullscreen: '全屏',

borderless: '无边界模式',

close: '关闭当前预览'

}

fileActionSettings

{     removeTitle: '删除文件',

uploadTitle: '上传文件',

zoomTitle: '查看详情',

dragTitle: '移动 / 重置',

indicatorNewTitle: '没有上传',

indicatorSuccessTitle: '上传',

indicatorErrorTitle: '上传错误',

indicatorLoadingTitle: '上传 ...'

},

五、    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

fileclear

点击浏览框右上角X 清空文件前响应事件

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

});

filecleared

点击浏览框右上角X 清空文件后响应事件

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

});

fileimageuploaded

在预览框中图片已经完全加载完毕后回调的事件

六、    常见错误：

(1)   当点击上传后，报错，提示你必须选择最少X个文件上传。

错误原因:html中input标签元素属性：data-min-file-count="2" 设置为X个文件，限制上传文件数。

本文非原创，转载自http://blog.csdn.net/u012526194/article/details/69937741

【转】Bootstrap FileInput中文API整理的更多相关文章

  1. Bootstrap FileInput中文API整理

    这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档,方便自己今后使用,也希望能给大家带来帮助,如有错误,希 ...

  2. Bootstrap FileInput中文API文档

    Bootstrap FileInput中文API整理 这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档, ...

  3. Bootstrap FileInput 上传 中文 API 整理

    Bootstrap FileInput 上传  中文 API 整理 上传插件有很多 但是公司用的就是 Bootstrap FileInput 自己就看了看  会用就行 自己都不知道每个值是干嘛用的就问 ...

  4. IScroll5中文API整理,用法与参考

    IScroll是移动页面上被使用的一款仿系统滚动插件.IScroll5相对于之前的IScroll4改进了许多,使得大家可以更方便的定制所需的功能了. 做项目的时候正好用到了这个插件,自己做了一下总结, ...

  5. bootstrap fileinput api翻译笔记

    bootstrap fileinput HTML标签属性 data-show-preview="false" // 是否显示预览区 multiple // 多文件 data-sho ...

  6. JS组件系列——Bootstrap文件上传组件：bootstrap fileinput

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  7. JS文件上传神器bootstrap fileinput详解

    Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一 ...

  8. bootstrap fileinput插件使用感悟

    bootstrap fileinput 的填坑感悟              这个插件在demo的网站地址http://plugins.krajee.com/file-preview-icons-de ...

  9. Bootstrap FileInput 多图上传插件 文档属性说明

    Bootstrap FileInput 多图上传插件   原文链接:http://blog.csdn.net/misterwho/article/details/72886248?utm_source ...

随机推荐

  1. ORM优缺点

    优点: 1.提高了开发效率.由于ORM可以自动对Entity对象与数据库中的Table进行字段与属性的映射,所以我们实际可能已经不需要一个专用的.庞大的数据访问层. 2.ORM提供了对数据库的映射,不 ...

  2. webAPI请求消息过滤器

    每当制作一个WebAPI,就必然会收到外部很多调用这个API的请求,有时候,我们希望,能从这些外部来的请求中,按照一定条件筛选过滤一下,只将那些我们觉得合法的,有必要回应的请求放进来,一方面挡住那些非 ...

  3. 基于uIP和uC/OS-II嵌入式网络开发

    基于uIP和uC/OS-II嵌入式网络开发 ——uIP主动发送数据分析 摘要:uIP协议栈简单易用,可以为16位单片机或者是更低级的处理器使用,占用的资源很少,相关移植网上有详细介绍,本文主要讨论uI ...

  4. 启动tomcat的时候为啥你启动的是8，启动起来的确实其他的Tomcat

    如果发现,是启动tomcat的时候为啥你启动的是8,启动起来的确实其他的Tomcat ,你可以去看看你的环境变量,是不是配了一个tomcat,

  5. AtomicReference 原子引用

    AtomicReference和AtomicInteger非常类似,不同之处就在于AtomicInteger是对整数的封装,底层采用的是compareAndSwapInt实现CAS,比较的是数值是否相 ...

  6. 个人免签收款接口 bufpay.com 支持限额设置

    有产品希望收款分布到不同的手机,每个当手机达到某一限额以后就停止改手机的收款. bufpay.com 近期上线了收款限额设置功能,配置界面如下图: 每个手机微信或支付宝可以单独设置每日限额,如果该手机 ...

  7. module.exports与exports的联系与区别

    首先说明他们是啥? 在CommonJS规范中,exports和module.exports这两个对象是把某一模块化文件中的属性和方法暴露给外部模块的接口(说法可能不准确),外部模块通过require引 ...

  8. eclipse官方下载地址

    下载地址:  https://www.eclipse.org/downloads/packages/release/Luna/SR2 选择不同版本

  9. 远程连接Oracle 服务器 解决Oracle查询中文乱码

    Dos方法: 依托于 目录下的文件 使用plsql developer 客户端软件进行连接 需要配置一下: 就是把Dos的客户端配置进来 然后,把服务器端的文件拷贝到你的的机器 并设置TNS_ADMI ...

  10. Ansible实现主备模式的高可用(Keepalived)

    前言 Ansible是一款极其简单的IT自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了批量系统配置.批量程序 ...