⽂件上传控件bootstrap-fileinput的使⽤
⼀、准备
1、插件下载地址：github/kartik-v/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⽂件
  查看⽰例：
    打开压缩包中的example/index.html或者访问plugins.krajee/file-basic-usage-demo查看⽰例。可根据⽰例的代码选择需要的控件代码使⽤。
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-show-cancel等详见option
    data-show-caption：显⽰⽂件上传的简介
    data-allowed-file-extensions：允许的⽂件后缀名，另外有data-allowed-file-types详见option
写c++的软件    .........
三、option选项说明：
属性名属性类型描述说明默认值
'en'
language String多语⾔设置，使⽤时需提前引⼊
\locales⽂件夹下对应的语⾔⽂件，
中⽂zh，引⼊语⾔⽂件必须放在
fileinput.js之后
showCaption Boolean是否显⽰被选⽂件的简介true
showBrowse Boolean是否显⽰浏览按钮true
showPreview Boolean是否显⽰预览区域true
showRemove Boolean是否显⽰移除按钮true,
showUpload Boolean是否显⽰上传按钮true,
showUpload Boolean是否显⽰上传按钮true,
showCancel Boolean是否显⽰取消按钮true,
showClose:Boolean是否显⽰关闭按钮true showUploadedThumbs Boolean true browseOnZoneClick Boolean false
false
autoReplace Boolean是否⾃动替换当前图⽚，设置为true
时，再次选择⽂件，
会将当前的⽂件替换掉。
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',
oracle for循环查询语句fullscreen: 'btn btn-default',
borderless: 'btn btn-default',values是什么意思中文翻译
close: 'btn btn-default'
},
preferIconicZoomPreview Boolrean false allowedPreviewTypes undefined undefined allowedPreviewMimeTypes Object null
allowedFileTypes Object['jpg', 'gif', 'png'],null
allowedFileExtensions Object null defaultPreviewContent Object null
customPreviewTags Object{}
previewFileIcon String'<i class="glyphicon
glyphicon-file"></i>' previewFileIconClass String'file-other-icon' previewFileIconSettings Object{} previewFileExtSettings Object{}
glyphicon-folder-open">
</i> '
browseClass String'btn btn-primary'
glyphicon-trash"></i>' removeClass String'btn btn-default'
glyphicon-ban-circle"></i>' uploadIcon String'<i class="glyphicon
glyphicon-upload"></i>'sql基础增删改查语句
uploadUrl String null
uploadAsync boolean true
uploadExtraData{}
zoomModalHeight number480
minImageHeight String null
minImageHeight String null
maxImageWidth String null
maxImageHeight String null
resizeImage boolean false
resizePreference String'width'
resizeDefaultImageType String'image/jpeg'
minFileSize number kb，上传⽂件的最⼩⼤⼩值0
maxFileSize number kb，如果为0表⽰不限制⽂件0
resizeDefaultImageType number25600(25MB) minFileCount number0
maxFileCount number0
msgValidationErrorClass String'text-danger' msgValidationErrorIcon String'<i class="glyphiconjquery下载文件请求
glyphicon-exclamation-sign">
</i> ' 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
'image' previewFileType String，内置['image', 'html',
等格式
elCaptionText String null elPreviewContainer String null
elPreviewImage String null
errorCloseButton String'<span class="close kv-error-
close">×</span>' slugCallback String暂时没有搜到说明，调试显⽰，在⽂null
dropZoneTitleClass String'file-drop-zone-title' fileActionSettings Object{}
otherActionButtons String''

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