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: "<i class="glyphicon glyphicon-picture"></i> ", // 浏览按钮图标
removeClass: "btn btn-danger", // 移除按钮CSS样式
removeLabel: "Delete", // 移除按钮文字
removeIcon: "<i class="glyphicon glyphicon-trash"></i> ", // 移除按钮图标
uploadClass: "btn btn-info", // 上传按钮CSS样式
uploadLabel: "Upload", // 上传按钮文字
uploadIcon: "<i class="glyphicon glyphicon-upload"></i> ", // 上传按钮图标
previewClass: "bg-warning",
hideThumbnailContent: true, // 是否显示预览区的预览图(预览区照常有, 只不过没有预览图片了)--不好用
});
});