bootstrap fileinput api翻译笔记

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

bootstrap fileinput

HTML标签属性
data-show-preview="false"// 是否显示预览区
multiple// 多文件
data-show-caption="true"// 显示输入框
readonly="true"
disabled="true"
data-show-remove="false" // remove按钮
class="file-loading"// 载入特效
data-allowed-file-extensions='["csv", "txt"]'// 扩展名限定
data-preview-file-type="text"//
required// 验证上传文件不能为空
accept="image/*" 选择文件时, 右边默认的扩展名(html input-file标签自带)
详见: http://w3schools.bootcss.com/tags/att_input_accept.html

js配置项
$(document).on('ready', function(){
$('#input').fileinput({
showCaption: false,// 显示输入框
showUpload: false,// 显示上传按钮
maxFileCount: 10,// 文件上传数量(一次允许上传的最大文件量)
mainClass: "input-group-lg",//输入框样式(height)
initialPreview: [ //预览图片设置
'1.jpg',
'2.jpg'
],
overwriteInitial: true, // 上传图片后预览是否会被刷掉
previewFileType: "image",
browseClass: "btn btn-primary btn-block", // 浏览按钮样式
browseLabel: "Pick Image", // 浏览按钮文字
browseIcon: " ", // 浏览按钮图标
removeClass: "btn btn-danger", // 移除按钮CSS样式
removeLabel: "Delete", // 移除按钮文字
removeIcon: " ", // 移除按钮图标
uploadClass: "btn btn-info", // 上传按钮CSS样式
uploadLabel: "Upload", // 上传按钮文字
uploadIcon: " ", // 上传按钮图标
previewClass: "bg-warning",
hideThumbnailContent: true, // 是否显示预览区的预览图(预览区照常有, 只不过没有预览图片了)--不好用
});
});