Bootstrap FileInput - Yii2

Bootstrap FileInput 多图上传插件
这货融合bootstrap框架,界面相当不错,api非常丰富,可定制内容能满足绝大数的场景.

最近在撸一个项目,用到它,花时间收集了一些文档,整理并翻译了部份内容.备用.

github 地址
https://github.com/kartik-v/yii2-widget-fileinput

官方 api/demo地址:
http://demos.krajee.com/widget-details/fileinput

---

在Yii2上安装、简单使用

安装

composer require kartik-v/yii2-widget-fileinput "@dev"

基本使用

use kartik\file\FileInput;

// 非ActiveForm的表单
echo '<label class="control-label">图片</label>';
echo FileInput::widget([
    'model' => $model,
    'attribute' => 'image[]',
    'options' => ['multiple' => true]
]);


//使用ActiveForm的表单
echo $form->field($model, 'image[]')->widget(FileInput::classname(), [
    'options' => ['multiple' => true],
]);

---

附：

1. Options 说明：

属性名	属性类型	描述说明	默认值
zoomModalHeight	number		480
validateInitialCount	boolean		FALSE
uploadUrl	String		上传文件路径
uploadIcon	String		'<i class="glyphicon glyphicon-upload"></i>'
uploadExtraData	上传文件时额外传递的参数设置		{}
uploadClass	String		‘btn btn-default’
uploadAsync	boolean	是否为异步上传	TRUE
textEncoding	String	编码设置	‘UTF-8’
slugCallback	String		null
showUploadedThumbs	Boolean		TRUE
showUpload	Boolean	是否显示上传按钮	true,
showRemove	Boolean	是否显示移除按钮	true,
showPreview	Boolean	是否显示预览区域	TRUE
showClose:	Boolean	是否显示关闭按钮	TRUE
showCaption	Boolean	是否显示被选文件的简介	TRUE
showCancel	Boolean	是否显示取消按钮	true,
showBrowse	Boolean	是否显示浏览按钮	TRUE
showAjaxErrorDetails	boolean
rogressClass	String		"progress-bar progress-bar-success progress-bar-striped active"
resizeQuality	number		0.92
resizePreference	String		‘width’
resizeImage	boolean		FALSE
resizeDefaultImageType	String		‘image/jpeg’
resizeDefaultImageType	number		25600(25MB)
removeIcon	String		'<i class="glyphicon glyphicon-trash"></i>'
removeFromPreviewOnError	Boolean		FALSE
removeClass	String		‘btn btn-default’
purifyHtml	Boolean		TRUE
progressUploadThreshold	number		99
progressThumbClass	String		"progress-bar progress-bar-success progress-bar-striped active"
progressErrorClass	String		"progress-bar progress-bar-danger"
progressCompleteClass	String		"progress-bar progress-bar-success"
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'},
previewThumbTags	Object		{}
previewFileType	String	预览文件类型,内置[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’,‘other‘]等格式	‘image’
previewFileIconSettings	Object		{}
previewFileIconClass	String		‘file-other-icon’
previewFileIcon	String		'<i class="glyphicon glyphicon-file"></i>'
previewFileExtSettings	Object		{}
previewClass	String	添加预览按钮的类属性	‘’
preferIconicZoomPreview	Boolrean		FALSE
preferIconicPreview	Boolrean		FALSE
overwriteInitial	Boolean		TRUE
otherActionButtons	String		”
msgValidationErrorIcon	String		'<i class="glyphicon glyphicon-exclamation-sign"></i> '
msgValidationErrorClass	String		‘text-danger’
msgErrorClass	String		‘file-error-message’
minImageWidth	String	图片的最小宽度	null
minImageHeight	String	图片的最小高度	null
minFileSize	number	单位为kb，上传文件的最小大小值	0
minFileCount	number	表示同时最小上传的文件个数	0
maxImageWidth	String	图片的最大宽度	null
maxImageHeight	String	图片的最大高度	null
maxFileSize	number	单位为kb，如果为0表示不限制文件大小	0
maxFileCount	number	表示允许同时上传的最大文件个数	0
mainTemplate	Object		null
mainClass	String		‘file-caption-main’
language	String	多语言设置，使用时需提前引入\locales文件夹下对应的语言文件，中文zh，引入语言文件必须放在fileinput.js之后	‘en’
initialPreviewThumbTags	Array/Object		[]
initialPreviewShowDelete	Boolean		TRUE
initialPreviewFileType	String		‘image’
initialPreviewDelimiter	String		'*$$*'
initialPreviewConfig	Array/Object		[]
initialPreviewAsData	Boolean		FALSE
initialPreview	Array/Object		[]
initialCaption	String		”
generateFileId	Object		null
frameClass	String		‘krajee-default’
fileSizeGetter	Object		null
fileActionSettings	Object	详见附录1.1	{}
errorCloseButton	String		'<span class="close kv-error-close">&times;</span>'
elPreviewStatus	String		null
elPreviewImage	String		null
elPreviewContainer	String		null
elErrorContainer	String		null
elCaptionText	String	设置标题栏提示信息	null
elCaptionContainer	String		null
dropZoneTitleClass	String	拖拽区域类属性设置	‘file-drop-zone-title’
dropZoneEnabled	boolean	是否显示拖拽区域	TRUE
deleteUrl	String	删除图片时的请求路径	”
deleteExtraData	Object	删除图片时额外传入的参数	{}
defaultPreviewContent	Object		null
customPreviewTags	Object		{}
customLayoutTags	Object		{}
captionClass	String		‘’
cancelIcon	String		'<i class="glyphicon glyphicon-ban-circle"></i>'
cancelClass	String		‘btn btn-default’
buttonLabelClass	String		‘hidden-xs’
browseOnZoneClick	Boolean		FALSE
browseIcon	String		'<i class="glyphicon glyphicon-folder-open"></i>&nbsp;'
browseClass	String		‘btn btn-primary’
autoReplace	Boolean	是否自动替换当前图片，设置为true时，再次选择文件，会将当前的文件替换掉。	FALSE
allowedPreviewTypes	Object	你可以通过这个字段配置你允许可以被展示成缩略图的文件类型，默认值是[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’] 。因此所有类型的文件默认都会被当成一个object来展示。如果你想只显示图片和视频的缩略图，你可以设置这个字段为[‘image’, ‘video’] 。如果你想进制所有文件类型的内容缩略图并且只显示 previewIcon 而非小图，你可以设置这个字段的值为null，空，或者false。	[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’]
allowedPreviewMimeTypes	Object		null
allowedFileTypes	Object	接收的文件后缀，如[‘jpg’, ‘gif’, ‘png’],不填将不限制上传文件后缀类型	null
allowedFileExtensions	Object		null
ajaxSettings	Object		{}
ajaxDeleteSettings	Object		{}

---

1.1 fileActionSettings 说明：

属性名	属性类型	描述说明	默认值
dragClass	string	每个文件缩略图中的拖动按钮的CSS类(在初始预览中排序/重新排列项目)
dragIcon	string	每个文件缩略图中拖动按钮的图标(在初始预览中排序/重新排列项目)
dragSettings	object	排序插件的配置
dragTitle	string	每个文件缩略图中拖拽按钮的标题(在初始预览中排序/重新排列项目)
indicatorError	string	每个文件缩略图中显示的上传错误的指示符(HTML标记)
indicatorErrorTitle	string	每个文件缩略图上显示错误的提示标题
indicatorLoading	string	每个文件缩略图中显示的正在进行的上传的指示符(HTML标记)
indicatorLoadingTitle	string	每个文件缩略图上的上传状态标题
indicatorNew	string	每个文件缩略图中显示的新挂载上传的指示符(HTML标记)
indicatorNewTitle	string	每个文件缩略图上显示新加载的标题
indicatorSuccess	string	每个文件缩略图中显示成功上传的一个指示符(HTML标记)
indicatorSuccessTitle	string	每个文件缩略图上显示成功上传的标题
removeClass	string	每个文件缩略图中删除按钮的CSS类
removeIcon	string	每个文件缩略图中显示删除按钮图标
removeTitle	string	每个文件缩略图中删除按钮的标题
showDrag	boolean	是否在缩略图中显示拖拽按钮(仅适用于初始预览内容)
showRemove	boolean	是否在缩略图中显示删除按钮

---

2.Method说明：

方法名	示例	描述
disable	$(‘#input-id’).fileinput(‘disable’);	禁用
enable	$(‘#input-id’).fileinput(‘enable’);	允许
reset	$(‘#input-id’).fileinput(‘reset’);	清除预览缩略图(除了成功上传和初始预览)，并清理ajax上传文件堆栈,但不能清除本地已选择的文件
destroy	$(‘#input-id’).fileinput(‘destroy’);	销毁插件,恢复原生上传文件输入框
refresh	$(‘#input-id’).fileinput(‘refresh’, {showCaption: false})	刷新插件,支持设置参数
clear	$(‘#input-id’).fileinput(‘clear’);	清除预览缩略图(除了成功上传和初始预览)，并清理ajax上传文件堆栈跟本地已经选择的文件。该方法比 reset 方法清除层次要更深入，主预览按钮旁边的删除按钮就是调用该方法
upload	$(‘#input-id’).fileinput(‘clear’);	触发ajax上传,参数 uploadUrl 必须设置才能生效
cancel	$(‘#input-id’).fileinput(‘cancel’);	取消正在通过ajax上传的操作
lock	$(‘#input-id’).fileinput(‘lock’);	禁用所有操作/按钮来锁定文件上传,不包括 取消 按钮
unlock	$(‘#input-id’).fileinput(‘unlock’);	解除所有禁用操作/按钮状态,lock方法的反向方法。一般与 lock 方法配对使用
addToStack	$(‘#input-id’).fileinput(‘addToStack’, fileObj);	将一个文件对象推到缓存的文件堆栈数组中，以便上传. 参数必须是一个文件对象
updateStack	$(‘#input-id’).fileinput(‘updateStack’, index, fileObj);	更新或覆盖文件堆栈数组中指定数组索引的文件对象。参数1: 数组索引；参数2: 文件对象
clearStack	$(‘#input-id’).fileinput(‘clearStack’);	清除整个文件上传堆栈
getFileStack	var files = $(‘#input-id’).fileinput(‘getFileStack’);	返回已选择的文件对象数组(仅适用于ajax上传)。此方法不会返回验证错误或已上传的文件
getFilesCount	var filesCount = $(‘#input-id’).fileinput(‘getFilesCount’);	返回所有已上传文件和预览列表文件(待上传)的数量