bootstrap-fileinput使⽤⼿册
⼀、准备
js：插件核⼼js代码，引⽤fileinput.min.js/fileinput.js即可，默认插件语⾔为英⽂，如需要中⽂需要引⽤js/locales/zh.js(其他语⾔引⽤相应的js⽂件)
  js/plugins：相关辅助插件，piexif.min.js（resize image插件）、sortable.js（初始化预览窗⼝缩略图排序插件）、purify.js（看说明是净化html代码⽤的，试了下没有搞明⽩具体有说明作⽤）
  css：插件核⼼css代码，fileinput.min.css/fileinput.css（核⼼css代码，引⽤任何⼀个）、fileinput-rtl.min.css/fileinput-rtl.css(选⽤这组css，⽂件选择框会和从右向左排列，即选择⽂件等相关按钮按钮在左边，⽂件框在右边)
  themes：主题，如需要插件主题样式可引⽤主题⽂件夹下的相应js和css⽂件
  查看⽰例：
2、代码引⽤
  需要引⽤jquery
  需要结合bootstrap使⽤，即页⾯需要引⼊bootstrap相关js和css⽂件
  引⽤fileinput.js 和css
  中⽂需要引⽤js/locales/zh.js
  需要主题样式时引⽤themes下相关⽂件夹中的js和css
  tips：最好以上按顺序引⽤，免得出现莫名其妙的问题，⽐如zh.js必须在fileinput.js后引⽤否则⽆效
⼆、使⽤⽰例
  1、基本⽤法，⾃动将⼀个普通的input框渲染成⾼⼤上的⽂件上传选择框：
<input id="f_upload" type="file" class="file" />
  只需要将class设置为file即可，效果如下：
  2、隐藏⽂件预览窗⼝
<input id="input-1a" type="file" class="file" data-show-preview="false">
  设置属性：data-show-preview=“false”，等同于初始化属性：showPreview：false
效果如下：
  3、使⽤input 属性和data-**属性创建多样化的⽂件上传框
<input id="input-2" name="input2" type="file fileloading" class="file" multiple
readonly="false" disabled="false"  data-show-upload="false" data-show-caption="true" data-show-preview="true" data-allowed-file-extensions='["jpg","png"]'>
  属性说明：
    type="file fileloading" file表⽰此input框将被渲染为⽂件上传控件，fileloading在选择⽂件后产⽣预览前会有友好的转圈的loading提⽰（⽂件选择多了后⽐较容易观察到）
    multiple：标识可以⽂件多选
    readonly/disabled：这个不⽤解释了噻
        data-show-upload：等同于属性showUpload，显⽰上传按钮，同理有data-show-remove、data-sh
ow-cancel等详见option
    data-show-caption：显⽰⽂件上传的简介
    data-allowed-file-extensions：允许的⽂件后缀名，另外有data-allowed-file-types详见option    　.........
三、option选项说明：
属性名属性类型描述说明默认值
language String 多语⾔设置，使⽤时需提前引⼊\locales⽂件夹下对
应的语⾔⽂件，
中⽂zh，引⼊语⾔⽂件必须放在fileinput.js之后
'en'
showCaption Boolean是否显⽰被选⽂件的简介true showBrowse Boolean是否显⽰浏览按钮true showPreview Boolean是否显⽰预览区域true showRemove Boolean是否显⽰移除按钮true, showUploa
d 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 false preferIconicZoomPreview Boolrean false allowedPreviewTypes undefined undefined allowedFileTypes Object['jpg', 'gif', 'png']，不填将不限制上null allowedFileExtensions Object null defaultPreviewContent Object null
previewFileIconSettings Object{} previewFileExtSettings Object{} buttonLabelClass String'hidden-xs'
browseIcon String '<i class="glyphicon glyphicon-folder-open"></i> '
browseClass String'btn btn-primary'
bootstrap 5removeIcon 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>'
uploadAsync boolean true uploadExtraData{} zoomModalHeight number480 minImageWidth String null minImageHeight String null maxImageWidth String null maxImageHeight String null resizeImage boolean false resizePreference String'width' resizeQuality number0.92 resizeDefaultImageType String'image/jpeg' minFileSize number kb，上传⽂件的最⼩⼤⼩值0 validateInitialCount boolean false msgValidationErrorClass String'text-danger'
msgValidationErrorIcon String '<i class="glyphicon glyphicon-exclamation-sign"></i> '
msgErrorClass String'file-error-message'
"progress-bar progress-bar-success
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 number99
previewFileType String，内置['image', 'html', 'text', 'video',
等格式
'image'
elCaptionContainer String null
elCaptionText String null
elPreviewContainer String null
elPreviewImage String null
elPreviewStatus String null
errorCloseButton String
close">×</span>'
slugCallback String 暂时没有搜到说明，调试显⽰，在⽂件选择后会调到
null
dropZoneEnabled boolean true dropZoneTitleClass String'file-drop-zone-title' fileActionSettings Object{} otherActionButtons String'' textEncoding String'UTF-8'
7、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('filebatchuploadsuccess', 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){
fileclear
});
filecleared 点击浏览框右上⾓X 清空⽂件后响应事件
$("#fileinput").on("filecleared",function(event, data, msg){ });
fileimageuploaded
在预览框中图⽚已经完全加载完毕后回调的事件
8、常见问题与错误
8.1 引⼊所需⽂件后页⾯刷新查看样式奇怪，浏览器提⽰错误等，可能是因为js、css⽂件的引⽤顺序问题，zh.js需要在fileinput.js后⾯引⼊。bootstrap最好在fileinput前引⼊。
8.2 ⽂件上传控件在使⽤$("form").serializeArray()时⽆法直接读取值，可以通过在⽂件上传完成后（fileuploaded）给⼀个隐藏的input框赋值的⽅式获取form值。
    举例场景：
      form表单中包含⽂件上传控件，需要在选择⽂件后不⽴刻上传，在点击form表单提交按钮后先上传⽂件，成功后提交表单。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。