bootstrap-fileinput使用配置

摘要: bootstrap-fileinput是基于bootstrap样式的文件上传插件,功能和样式丰富.

因为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: '<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: {
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: '<i class="glyphicon glyphicon-file"></i>',
previewFileIconClass: 'file-other-icon',
previewFileIconSettings: {},
previewFileExtSettings: {},
buttonLabelClass: 'hidden-xs',
browseIcon: '<i class="glyphicon glyphicon-folder-open"></i> ',
browseClass: 'btn btn-primary',
removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
removeClass: 'btn btn-default',
cancelIcon: '<i class="glyphicon glyphicon-ban-circle"></i>',
cancelClass: 'btn btn-default',
uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
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: '<i class="glyphicon glyphicon-exclamation-sign"></i> ',
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: '<span class="close kv-error-close">×</span>',
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  mydata

第二步,配置中:

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

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

{
initialPreview: [
"http://lorempixel.com/1920/1080/nature/1",
"http://lorempixel.com/1920/1080/nature/2",
"http://lorempixel.com/1920/1080/nature/3",
],
initialPreviewConfig: [{
caption: "nature-1.jpg", size: 329892, width: "120px", url: "", //删除接口 或者deleteUrl,
key: 1,
extra: {id: 100},
},
{
caption: "nature-1.jpg",
size: 329892,
width: "120px",
url: "", //删除接口 或者deleteUrl
key: 1,
extra: {id: 100},
},
{
caption: "nature-1.jpg",
size: 329892,
width: "120px",
url: "", //删除接口 或者deleteUrl
key: 1,
extra: {id: 100},
},
],
}

自己在使用的时候遇到的问题????:

删除图片:
情景: 当我上传成功一个图片后,发现图片上传错了,想立马把他删除掉,但是我当点击删除按钮时,获取到数据是包裹当前图片的一个元素对象的id名

问题: 但是,预览框中的包裹图片的元素对象的id名竟然有些是一样的(大概是这样:id = 'upload-1244565476567'),(很诡异),所以根据id名我仍无法确定到当前要删除文件,望哪位大神指点迷津,将十分感谢 . . .

2017-05-13:补充:针对第一个问题,搜过作者的论坛后,初步得出答案,每当有文件上传成功后,都将上传控件destroy,然后马上再次的初始化,并将服务器中的所以图片的信息通过 initailPreview配置,默认的显示在页面中,这样所以的图片的删除动作使用的都是initailPreviewConfig中的url进行删除. 若有哪个地方理解的有误,或者对此插件有熟练的使用,还请大神指点迷津,将十分感谢 . . .