Bootstrap FileInput

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’); 返回所有已上传文件和预览列表文件(待上传)的数量