bootstrap-fileinput使用配置

最新推荐文章于 2024-04-29 17:11:51 发布

亓勝

最新推荐文章于 2024-04-29 17:11:51 发布

阅读量4.6k

点赞数

分类专栏： WEB 文章标签： bootstrap fileinput 文件上传

原文链接：https://my.oschina.net/u/3272730/blog/889760

版权

WEB 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

bootstrap-fileinput使用配置

因为bootstrap是基于jquery的,因此,引用插件前,应先引入bootstrap.css, jquery.js(要求bootstrap的版本在3以上).
引入fileinput 的必须文件: bootstrap-fileinput.css, bootstrap-fileinput.js (这是官方文档英文 )
htm 结构

<div class="content">
      <input multiple class="" id="uploadFile5" type="file" value="选择图片">
</div>

注:控件生产的结构都会在content容器中这效果图

控件初始化和基本配置:

$(".content").fileinput(

 language: 'en',
 showCaption: true,
 showBrowse: true,
 showPreview: true,
 showRemove: true,
 showUpload: true,
 showCancel: true,
 showClose: true,
 showUploadedThumbs: true,
 browseOnZoneClick: false,
 autoReplace: false,
 generateFileId: null,
 previewClass: '',
 captionClass: '',
 frameClass: 'krajee-default',
 mainClass: 'file-caption-main',
 mainTemplate: null,
 purifyHtml: true,
 fileSizeGetter: null,
 initialCaption: '',
 initialPreview: [],
 initialPreviewDelimiter: '*$$*',
 initialPreviewAsData: false,
 initialPreviewFileType: 'image',
 initialPreviewConfig: [],
 initialPreviewThumbTags: [],
 previewThumbTags: {},
 initialPreviewShowDelete: true,
 removeFromPreviewOnError: false,
 deleteUrl: '',
 deleteExtraData: {},
 overwriteInitial: true,
 previewZoomButtonIcons: {
 prev: '',
 next: '',
 toggleheader: '',
 fullscreen: '',
 borderless: '',
 close: ''
 },
 previewZoomButtonClasses: {
 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: false,
 preferIconicZoomPreview: false,
 allowedPreviewTypes: undefined,
 allowedPreviewMimeTypes: null,
 allowedFileTypes: null,
 allowedFileExtensions: null,
 defaultPreviewContent: null,
 customLayoutTags: {},
 customPreviewTags: {},
 previewFileIcon: '',
 previewFileIconClass: 'file-other-icon',
 previewFileIconSettings: {},
 previewFileExtSettings: {},
 buttonLabelClass: 'hidden-xs',
 browseIcon: ' ',
 browseClass: 'btn btn-primary',
 removeIcon: '',
 removeClass: 'btn btn-default',
 cancelIcon: '',
 cancelClass: 'btn btn-default',
 uploadIcon: '',
 uploadClass: 'btn btn-default',
 uploadUrl: null,
 uploadAsync: true,
 uploadExtraData: {},
 zoomModalHeight: 480,
 minImageWidth: null,
 minImageHeight: null,
 maxImageWidth: null,
 maxImageHeight: null,
 resizeImage: false,
 resizePreference: 'width',
 resizeQuality: 0.92,
 resizeDefaultImageType: 'image/jpeg',
 resizeIfSizeMoreThan: 0, // in KB
 minFileSize: 0,
 maxFileSize: 0,
 maxFilePreviewSize: 25600, // 25 MB
 minFileCount: 0,
 maxFileCount: 0,
 validateInitialCount: false,
 msgValidationErrorClass: 'text-danger',
 msgValidationErrorIcon: ' ',
 msgErrorClass: 'file-error-message',
 progressThumbClass: "progress-bar progress-bar-success progress-bar-striped active",
 progressClass: "progress-bar progress-bar-success progress-bar-striped active",
 progressCompleteClass: "progress-bar progress-bar-success",
 progressErrorClass: "progress-bar progress-bar-danger",
 progressUploadThreshold: 99,
 previewFileType: 'image',
 elCaptionContainer: null,
 elCaptionText: null,
 elPreviewContainer: null,
 elPreviewImage: null,
 elPreviewStatus: null,
 elErrorContainer: null,
 errorCloseButton: '×',
 slugCallback: null,
 dropZoneEnabled: true,
 dropZoneTitleClass: 'file-drop-zone-title',
 fileActionSettings: {},
 otherActionButtons: '',
 textEncoding: 'UTF-8',
 ajaxSettings: {},
 ajaxDeleteSettings: {},
 showAjaxErrorDetails: true
 };

//这是插件中的所有的配置选项及其默认值.
//下面是常用的几个配置项
/*{
 language: 'zh', //语言格式(默认为英文,若设置为中文或其他语言,需引入语言js)
 uploadUrl: 'url',
 allowedFileExtensions: [],//接收的文件后缀
 showUpload: true, //是否显示上传按钮
 showCaption: true, //是否显示标题(即文件名称)
 showPreview: true, //是否显示拖拽区
 maxFileCount: 0, //表示允许同时上传的最大文件个数
 uploadExtraData:, //向后台传递的参数
 showAjaxErrorDetails: false, //上传失败后,是否显示返回的信息
 ajaxSettings:{ //配置回调函数
 beforeSend: fnBefore,
 success: fnSuccess,
 complete: fnComplete,
 error: fnError
 }
}*/
)

此时,基本功能都已有,接下来就是根据自己的需求对其进行更进一步的配置

提交过程中的常用事件和jQuery中的很接近,有filereset, fileclear, filecleared, fileloaded, and fileerror.(可以像jquery中那样,书写注册事件,因为函数返回的还是控件本身,所以可以链式调用)

支持的各种文件类型,内置的类型有: image, text, html, video, audio, flash, object, and other.

预览文件的默认类型有:['image', 'html', 'text', 'video', 'audio', 'flash', 'object']

你可以自定义,如 allowedPreviewTypes: ['images','html'] 注:当将allowedPreviewTypes: 设置为 null,空,或者false时,预览图将都是相同的一个小图标.

自定义预览图的大小(宽和高,下面是插件默认的值) 如:previewSettings:{ image: {width: "auto", height: "160px"}, html: {width: "213px", height: "160px"}, text: {width: "213px", height: "160px"}, video: {width: "auto", height: "100%", 'max-width': "100%"}, audio: {width: "100%", height: "30px"}, flash: {width: "auto", height: "100%", 'max-width': "100%"}, object: {height: "100%"}, pdf: {width: "160px", height: "160px"}, other: {width: "160px", height: "160px"}}

提交方式有两种 ;表单提交和基于ajax的提交 (Upload action defaults to form submit. Supports an upload route/server action parameter for custom ajax based upload.) 若想要使用ajax上传文件,必须设置uploadUrl属性,否则将默认使用form表单提交:

uploadUrl:'后台url地址'

返回的数据应为json类型

上传类型:上传异步还是同步(默认是异步):

uploadAsync :true 异步时每个文件发送一次ajax;同步上传时,ajax只触发一次

传递参数的方法:传递参数,有两种方式:

a.初始化时就确定数据:uploadExtraData:{id:1}

b.动态获取参数并传递:

第一步,方法外定义参数:

var data

第二步,配置中:

uploadExtraData: function () {

       return mydata

},

第三步,

$(".fileinput").on("filepreajax", function (event, data) {

     uploadExtraData =   { id:$(".someInput").val() //此时可以动态获取

     };

})

minImageHeight,maxImageHeight,minImageWidth,maxImageWidth:

对上传图片的宽高进行限制(px为单位); minFileSize ,maxFileSize 对上传文件的大小进行限制(kb为单位)

常用函数配置(推荐使用插件的回调函数): change , fileselect ,filereset, fileclear, filecleared, fileloaded, fileerror 和jquery的回调函数很像,依次是: 文件选中后的事件,文件选中事件, input框重置事件, 当input框中的remove按钮或预览窗口的关闭按钮按下时的事件, 文件在预览框被清除事件,文件上传成功的事件:(参数较多,有function(event, file, previewId, index, reader),上传时验证失败的函数

插件支持事件(亲自测试过的):

      fileuploaded(event,data , previewId , index):上传并完成时触发(无论是点击的哪个按钮)

      filebatchuploadsuccess(event,data,previewId,index):当点击input的上传时(多文件上传),触发此事件   所以文件上传成功时触发(只在同步上传时,且所有文件上传成功)

      filebatchuploadcomplete(event,files,extra):当点击input的上传时(无论是否是多文件上传),触发此事件 (亲测不对多文件上传结束后触发,无论异步还是同步)

      filesuccessremove(event,id) :点击删除预览框中的删除按钮前触发( 已上传成功的文件 )

      filepreremove(event,id,index):点击删除预览框中的删除按钮前触发( initialPreview中的文件除外,只针对于还未上传的文件 ) //id=文件容器的id , index=文件容器的index

      fileuploaderror(event,data,msg):选中文件后未通过验证时触发及取消正在上传的文件,可用于限制文件大小类型等

注:a. filepreajax > filepreupload > fileuploaded> filebatchuploadcomplete

     b.(多文件) filepreajax(多次触发) > filepreupload > fileuploaded(多次触发) > filebatchuploadcomplete

插件支持的方法:

disable,将file input框置为不可用($('#input-id').fileinput('disable').fileinput('enable'))

,enable ,可用

reset , 重置

destroy, 取消对此input 的初始化(将其变为一个普通的input框)

refresh, 刷新input

clear :清除提交的记录

,upload :触发input的上传

,cancel ,:取消正在上传的ajax

lock:锁定按钮,取消按钮除外

unlock,

addToStack :将一个文件加进缓存文件栈(必须传递一个文件对象)

,updateStack :用一个文件替换掉缓存文件栈中的一个文件$

clearStack:清空文件栈

getFileStack :返回一个已选中文件列表

getFilesCount ,

zoom,

getPreview

展示页面加载时,数据库已存在的图片(及删除的接口和传递的参数)