怎么使用bootstrap-fileinput实现文件上传

这篇文章主要介绍怎么使用bootstrap-fileinput实现文件上传，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！一、准备1、首先需要准备我们的插件，下载地址如下:https://github.com/kartik-v/bootstrap-fileinput/在文件中：js：插件核心js代码，我们需要引用fileinput.min.js/fileinput.js即可，默认插件语言为英文，如需要中文需要引用js/locales/zh.js(其他语言引用相应的js文件) 。　　js/plugins：相关辅助插件，piexif.min.js（resizeimage插件）、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或者访问http://plugins.krajee.com/file-basic-usage-demo来进行查看示例；还可以根据示例的代码选择需要的控件代码使用。2、代码引用我们在进编程的时候是需要引用 jquery，而且还需要结合 bootstrap 使用，即页面需要引入bootstrap 相关 js 和 css 文件；不仅这样我们还需要引用到相关的fileinput.js和css，在中文中则需要引用js/locales/zh.js；如果有时候需要主题样式时则要引用themes下相关文件夹中的 js 和 css。二、使用示例1、基本用法，通过自动将一个普通的 input 框渲染成高大上的文件上传选择框，代码如下：我们只需要将 class 设置为 file 即可2、隐藏文件预览窗口
当我们设置属性：data-show-preview=“false”之后就等同于初始化属性：showPreview：false3、使用 input 属性和 data-** 属性创建多样化的文件上传框下面是使用相关内容的代码：三、option选项说明
属性名属性类型描述说明默认值languageString多语言设置，使用时需提前引入locales文件夹下对应的语言文件，中文zh，引入语言文件必须放在fileinput.js之后’en’showCaptionBoolean是否显示被选文件的简介trueshowBrowseBoolean是否显示浏览按钮trueshowPreviewBoolean是否显示预览区域trueshowRemoveBoolean是否显示移除按钮true,showUploadBoolean是否显示上传按钮true,showCancelBoolean是否显示取消按钮true,showClose:Boolean是否显示关闭按钮trueshowUploadedThumbsBooleantruebrowseOnZoneClickBooleanfalseautoReplaceBoolean是否自动替换当前图片，设置为true时，再次选择文件，会将当前的文件替换掉。falsegenerateFileIdObjectnullpreviewClassString添加预览按钮的类属性‘’captionClassString‘’frameClassString’krajee-default’mainClassString’file-caption-main’mainTemplateObjectnullpurifyHtmlBooleantruefileSizeGetterObjectnullinitialCaptionString”initialPreviewArray/Object[]initialPreviewDelimiterString’*$$*’initialPreviewAsDataBooleanfalseinitialPreviewFileTypeString’image’initialPreviewConfigArray/Object[]initialPreviewThumbTagsArray/Object[]previewThumbTagsObject{}initialPreviewShowDeleteBooleantrueremoveFromPreviewOnErrorBooleanfalsedeleteUrlString删除图片时的请求路径免费云主机域名”deleteExtraDataObject删除图片时额外传入的参数{}overwriteInitialBooleantruepreviewZoomButtonIconsObject{prev: ‘‘, next: ‘‘, toggleheader: ‘‘, fullscreen: ‘‘, borderless: ‘‘,close: ‘‘},previewZoomButtonClassesObject{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’},preferIconicPreviewBoolreanfalsepreferIconicZoomPreviewBoolreanfalseallowedPreviewTypesundefinedundefinedallowedPreviewMimeTypesObjectnullallowedFileTypesObject接收的文件后缀，如[‘jpg’, ‘gif’, ‘png’],不填将不限制上传文件后缀类型nullallowedFileExtensionsObjectnulldefaultPreviewContentObjectnullcustomLayoutTagsObject{}customPreviewTagsObject{}previewFileIconString’‘previewFileIconClassString’file-other-icon’previewFileIconSettingsObject{}previewFileExtSettingsObject{}buttonLabelClassString’hidden-xs’browseIconString’‘browseClassString’btn btn-primary’removeIconString’‘removeClassString’btn btn-default’cancelIconString’‘cancelClassString’btn btn-default’uploadIconString’‘uploadClassString’btn btn-default’uploadUrlString上传文件路径nulluploadAsyncboolean是否为异步上传trueuploadExtraData上传文件时额外传递的参数设置{}zoomModalHeightnumber480minImageWidthString图片的最小宽度nullminImageHeightString图片的最小高度nullmaxImageWidthString图片的最大宽度nullmaxImageHeightString图片的最大高度nullresizeImagebooleanfalseresizePreferenceString’width’resizeQualitynumber0.92resizeDefaultImageTypeString’image/jpeg’minFileSizenumber单位为kb，上传文件的最小大小值0maxFileSizenumber单位为kb，如果为0表示不限制文件大小0resizeDefaultImageTypenumber25600(25MB)minFileCountnumber表示同时最小上传的文件个数0maxFileCountnumber表示允许同时上传的最大文件个数0validateInitialCountbooleanfalsemsgValidationErrorClassString’text-danger’msgValidationErrorIconString’ ‘msgErrorClassString’file-error-message’progressThumbClassString”progress-bar progress-bar-success progress-bar-striped active”rogressClassString”progress-bar progress-bar-success progress-bar-striped active”progressCompleteClassString”progress-bar progress-bar-success”progressErrorClassString”progress-bar progress-bar-danger”progressUploadThresholdnumber99previewFileTypeString预览文件类型,内置[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’,‘other‘]等格式’image’elCaptionContainerStringnullelCaptionTextString设置标题栏提示信息nullelPreviewContainerStringnullelPreviewImageStringnullelPreviewStatusStringnullelErrorContainerStringnullerrorCloseButtonString’‘slugCallbackString暂时没有搜到说明，调试显示，在文件选择后会调到这个方法。nulldropZoneEnabledboolean是否显示拖拽区域truedropZoneTitleClassString拖拽区域类属性设置’file-drop-zone-title’fileActionSettingsObject{}otherActionButtonsString”textEncodingString编码设置’UTF-8’ajaxSettingsObject{}ajaxDeleteSettingsObject{}showAjaxErrorDetailsbooleantrue四、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(‘filepreupload’, 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) {});fileresetfileclear点击浏览框右上角X 清空文件前响应事件$(“#fileinput”).on(“fileclear”,function(event, data, msg){});filecleared点击浏览框右上角X 清空文件后响应事件$(“#fileinput”).on(“filecleared”,function(event, data, msg){});fileimageuploaded在预览框中图片已经完全加载完毕后回调的事件以上是“怎么使用bootstrap-fileinput实现文件上传”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注百云主机行业资讯频道！

相关推荐: 小程序如何简单封装http访问网络库

这篇文章主要讲解了“小程序如何简单封装http访问网络库”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“小程序如何简单封装http访问网络库”吧！ 代码如下：var HOS免费云主机域名T = ‘https://…