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], ]);附：
Options 说明： 属性名属性类型描述说明默认值zoomModalHeightnumber480validateInitialCountbooleanFALSEuploadUrlString上传文件路径uploadIconString'<i class="glyphicon glyphicon-upload"></i>'uploadExtraData上传文件时额外传递的参数设置{}uploadClassString‘btn btn-default’uploadAsyncboolean是否为异步上传TRUEtextEncodingString编码设置‘UTF-8’slugCallbackStringnullshowUploadedThumbsBooleanTRUEshowUploadBoolean是否显示上传按钮true,showRemoveBoolean是否显示移除按钮true,showPreviewBoolean是否显示预览区域TRUEshowClose:Boolean是否显示关闭按钮TRUEshowCaptionBoolean是否显示被选文件的简介TRUEshowCancelBoolean是否显示取消按钮true,showBrowseBoolean是否显示浏览按钮TRUEshowAjaxErrorDetailsbooleanrogressClassString"progress-bar progress-bar-success progress-bar-striped active"resizeQualitynumber0.92resizePreferenceString‘width’resizeImagebooleanFALSEresizeDefaultImageTypeString‘image/jpeg’resizeDefaultImageTypenumber25600(25MB)removeIconString'<i class="glyphicon glyphicon-trash"></i>'removeFromPreviewOnErrorBooleanFALSEremoveClassString‘btn btn-default’purifyHtmlBooleanTRUEprogressUploadThresholdnumber99progressThumbClassString"progress-bar progress-bar-success progress-bar-striped active"progressErrorClassString"progress-bar progress-bar-danger"progressCompleteClassString"progress-bar progress-bar-success"previewZoomButtonIconsObject{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>'},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'},previewThumbTagsObject{}previewFileTypeString预览文件类型,内置[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’,‘other‘]等格式‘image’previewFileIconSettingsObject{}previewFileIconClassString‘file-other-icon’previewFileIconString'<i class="glyphicon glyphicon-file"></i>'previewFileExtSettingsObject{}previewClassString添加预览按钮的类属性‘’preferIconicZoomPreviewBoolreanFALSEpreferIconicPreviewBoolreanFALSEoverwriteInitialBooleanTRUEotherActionButtonsString”msgValidationErrorIconString'<i class="glyphicon glyphicon-exclamation-sign"></i> 'msgValidationErrorClassString‘text-danger’msgErrorClassString‘file-error-message’minImageWidthString图片的最小宽度nullminImageHeightString图片的最小高度nullminFileSizenumber单位为kb，上传文件的最小大小值0minFileCountnumber表示同时最小上传的文件个数0maxImageWidthString图片的最大宽度nullmaxImageHeightString图片的最大高度nullmaxFileSizenumber单位为kb，如果为0表示不限制文件大小0maxFileCountnumber表示允许同时上传的最大文件个数0mainTemplateObjectnullmainClassString‘file-caption-main’languageString多语言设置，使用时需提前引入\locales文件夹下对应的语言文件，中文zh，引入语言文件必须放在fileinput.js之后‘en’initialPreviewThumbTagsArray/Object[]initialPreviewShowDeleteBooleanTRUEinitialPreviewFileTypeString‘image’initialPreviewDelimiterString'*$$*'initialPreviewConfigArray/Object[]initialPreviewAsDataBooleanFALSEinitialPreviewArray/Object[]initialCaptionString”generateFileIdObjectnullframeClassString‘krajee-default’fileSizeGetterObjectnullfileActionSettingsObject详见附录1.1{}errorCloseButtonString'<span class="close kv-error-close">×</span>'elPreviewStatusStringnullelPreviewImageStringnullelPreviewContainerStringnullelErrorContainerStringnullelCaptionTextString设置标题栏提示信息nullelCaptionContainerStringnulldropZoneTitleClassString拖拽区域类属性设置‘file-drop-zone-title’dropZoneEnabledboolean是否显示拖拽区域TRUEdeleteUrlString删除图片时的请求路径”deleteExtraDataObject删除图片时额外传入的参数{}defaultPreviewContentObjectnullcustomPreviewTagsObject{}customLayoutTagsObject{}captionClassString‘’cancelIconString'<i class="glyphicon glyphicon-ban-circle"></i>'cancelClassString‘btn btn-default’buttonLabelClassString‘hidden-xs’browseOnZoneClickBooleanFALSEbrowseIconString'<i class="glyphicon glyphicon-folder-open"></i> 'browseClassString‘btn btn-primary’autoReplaceBoolean是否自动替换当前图片，设置为true时，再次选择文件，会将当前的文件替换掉。FALSEallowedPreviewTypesObject你可以通过这个字段配置你允许可以被展示成缩略图的文件类型，默认值是[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’] 。因此所有类型的文件默认都会被当成一个object来展示。如果你想只显示图片和视频的缩略图，你可以设置这个字段为[‘image’, ‘video’] 。如果你想进制所有文件类型的内容缩略图并且只显示 previewIcon 而非小图，你可以设置这个字段的值为null，空，或者false。[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’]allowedPreviewMimeTypesObjectnullallowedFileTypesObject接收的文件后缀，如[‘jpg’, ‘gif’, ‘png’],不填将不限制上传文件后缀类型nullallowedFileExtensionsObjectnullajaxSettingsObject{}ajaxDeleteSettingsObject{}1.1 fileActionSettings 说明：
属性名属性类型描述说明默认值dragClassstring每个文件缩略图中的拖动按钮的CSS类(在初始预览中排序/重新排列项目)dragIconstring每个文件缩略图中拖动按钮的图标(在初始预览中排序/重新排列项目)dragSettingsobject排序插件的配置dragTitlestring每个文件缩略图中拖拽按钮的标题(在初始预览中排序/重新排列项目)indicatorErrorstring每个文件缩略图中显示的上传错误的指示符(HTML标记)indicatorErrorTitlestring每个文件缩略图上显示错误的提示标题indicatorLoadingstring每个文件缩略图中显示的正在进行的上传的指示符(HTML标记)indicatorLoadingTitlestring每个文件缩略图上的上传状态标题indicatorNewstring每个文件缩略图中显示的新挂载上传的指示符(HTML标记)indicatorNewTitlestring每个文件缩略图上显示新加载的标题indicatorSuccessstring每个文件缩略图中显示成功上传的一个指示符(HTML标记)indicatorSuccessTitlestring每个文件缩略图上显示成功上传的标题removeClassstring每个文件缩略图中删除按钮的CSS类removeIconstring每个文件缩略图中显示删除按钮图标removeTitlestring每个文件缩略图中删除按钮的标题showDragboolean是否在缩略图中显示拖拽按钮(仅适用于初始预览内容)showRemoveboolean是否在缩略图中显示删除按钮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’);清除整个文件上传堆栈getFileStackvar files = $(‘#input-id’).fileinput(‘getFileStack’);返回已选择的文件对象数组(仅适用于ajax上传)。此方法不会返回验证错误或已上传的文件getFilesCountvar filesCount = $(‘#input-id’).fileinput(‘getFilesCount’);返回所有已上传文件和预览列表文件(待上传)的数量