BootstrapFileInput中⽂API⽂档
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:"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⽂件夹
'en'
下对应的语⾔⽂件,中⽂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
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 removeFromPreviewOnErrorBoolean 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
preferIconicZoomPreview Boolrean
allowedPreviewTypes undefined
allowedPreviewMimeTypes Object
allowedFileTypes Object['jpg', 'gif', 'png'],不填将不allowedFileExtensions Object
defaultPreviewContent Object
customLayoutTags Object
customPreviewTags Object
previewFileIcon String
previewFileIconClass String
previewFileIconSettings Object
previewFileExtSettings Object
buttonLabelClass String
browseClass String
removeIcon String
removeClass String
cancelIcon String
cancelClass String
uploadIcon String
uploadClass String
uploadUrl String
uploadAsync boolean
uploadExtraData
zoomModalHeight number
minImageWidth String
minImageHeight String
maxImageWidth String
maxImageHeight String
resizeImage boolean
bootstrap项目minFileSize number kb,上传⽂件的最⼩⼤⼩值
maxFileSize number kb,如果为0表⽰不限制⽂件⼤⼩
resizeDefaultImageType number
minFileCount number
msgValidationErrorIcon String
rogressClass String
progressCompleteClass String
progressCompleteClass String
progressErrorClass String
progressUploadThreshold number
previewFileType String,内置['image', 'html', 'text', 'video',
等格式elCaptionContainer String
elCaptionText String
elPreviewContainer String
elPreviewImage String
elPreviewStatus String
elErrorContainer String
errorCloseButton String
slugCallback String
dropZoneEnabled boolean
dropZoneTitleClass String
fileActionSettings Object
ajaxSettings Object
ajaxDeleteSettings Object
showAjaxErrorDetails boolean
四、提⽰说明设置:
属性名默认值中⽂
fileSingle file⽂件
filePlural files个⽂件browseLabel Browse &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',{
'image': 'image', 'html': 'HTML',
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论