fileinput配置项

迈不过友情╰ 2023-06-13 06:12 9阅读 0赞

本篇表格列举BootStrap的上传插件fileinput的部分配置项，为了便于自己开发使用。[官网地址][Link 1]

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>属性类型</th> 
   <th>描述说明</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>language</td> 
   <td>String</td> 
   <td>多语言设置,使用时需提前引入\locales文件夹下对应的语言文件，中文zh，引入语言文件必须放在fileinput.js之后</td> 
   <td>‘en’</td> 
  </tr> 
  <tr> 
   <td>theme</td> 
   <td>String</td> 
   <td>用于插件的主题（如果你没有设置则默认为内置主题）</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>showCaption</td> 
   <td>Boolean</td> 
   <td>是否显示文件名</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>showPreview</td> 
   <td>Boolean</td> 
   <td>是否显示文件预览</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>showRemove</td> 
   <td>Boolean</td> 
   <td>是否显示删除/清除按钮</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>showUpload</td> 
   <td>Boolean</td> 
   <td>是否显示文件上传按钮。它默认为一个表单提交按钮，除非指定了uploadUrl属性。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>showCancel</td> 
   <td>Boolean</td> 
   <td>是否显示文件上传取消按钮。只有在AJAX上传过程中，才会启用和显示。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>showClose</td> 
   <td>Boolean</td> 
   <td>是否显示预览界面的关闭图标。只有当showPreview为true或者在预览模板中使用{close}标签时才会被解析。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>previewFileType</td> 
   <td>String</td> 
   <td>预览文件类型,内置[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’,‘other‘]等格式</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>dropZoneEnabled</td> 
   <td>Boolean</td> 
   <td>是否显示拖拽区域</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>dropZoneTitleClass</td> 
   <td>String</td> 
   <td>拖拽区域类属性设置</td> 
   <td>‘file-drop-zone-title’</td> 
  </tr> 
  <tr> 
   <td>uploadUrl</td> 
   <td>String</td> 
   <td>上传处理操作的URL（通常用于基于ajax的处理）。默认为空。如果未设置或为空，则上传按钮操作将默认为表单提交。注意：如果您想使用拖放、附加/删除文件、通过ajax有选择地上传文件等高级功能，这是必需的。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>uploadAsync</td> 
   <td>Boolean</td> 
   <td>多个文件的批上载是否异步/并行</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>uploadExtraData</td> 
   <td>Object/function</td> 
   <td>将作为数据通过POST传递给url/AJAX服务器调用的额外数据即上传文件时额外传递的参数设置。此属性仅适用于ajax上传以及为uploadUrl设置值时。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>maxImageHeight</td> 
   <td>int</td> 
   <td>图片的最大高度</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>minImageHeight</td> 
   <td>int</td> 
   <td>图片的最小高度</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>maxImageWidth</td> 
   <td>int</td> 
   <td>图片的最大宽度</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>minImageWidth</td> 
   <td>int</td> 
   <td>图片的最小宽度</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>minFileSize</td> 
   <td>Float</td> 
   <td>单位为kb，上传文件的最小大小值</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>maxFileSize</td> 
   <td>Float</td> 
   <td>单位为kb，上传文件的最大大小值，如果为0表示不限制文件大小</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>resizeDefaultImageType</td> 
   <td>String</td> 
   <td>调整大小后转换图像的默认图像mime类型</td> 
   <td>‘jpeg’</td> 
  </tr> 
  <tr> 
   <td>minFileCount</td> 
   <td>Float</td> 
   <td>表示同时最小上传的文件个数</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>maxFileCount</td> 
   <td>Float</td> 
   <td>表示允许同时上传的最大文件个数</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>showUploadedThumbs</td> 
   <td>Boolean</td> 
   <td>是否在预览窗口中持续显示已经上传的文件缩略图（用于ajax上传），直到按下删除/清除按钮。默认值为true。当设置为false时，下一批选择上传的文件将从预览中清除这些已经上传的文件缩略图。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>showBrowse</td> 
   <td>Boolean</td> 
   <td>是否显示文件浏览按钮</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>browseOnZoneClick</td> 
   <td>Boolean</td> 
   <td>是否在点击预览区域时触发文件浏览/选择</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>autoReplace</td> 
   <td>Boolean</td> 
   <td>当上传文件达到maxFileCount限制并且一些新的文件被选择后，是否自动替换预览中的文件。如果maxFileCount值有效，那么这个参数会起作用。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>deleteExtraData</td> 
   <td>Object/function</td> 
   <td>通过POST方法传递给初始预览的删除url或者AJAX服务器响应的额外数据。它会被initialPreviewConfig[‘extra’]属性覆盖。 此属性只有当你已经给initialPreviewConfig[‘url’]或deleteUrl传了一个值且在初始预览中使用ajax删除有效。它可以设置为对象（键值对数组）或回调函数。设置为对象可以像下面的例子一样： {id: 100, value: ‘100 Details’}</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>deleteUrl</td> 
   <td>String</td> 
   <td>通过AJAX POST响应删除预览中图像或内容的URL地址。它会被initialPreviewConfig[‘url’]属性覆盖。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>captionClass</td> 
   <td>String</td> 
   <td>任何加到文件名容器的额外CSS类</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>previewClass</td> 
   <td>String</td> 
   <td>添加预览按钮的类属性</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>mainClass</td> 
   <td>String</td> 
   <td>任何加到插件主体容器的额外CSS类，用来渲染文件名和浏览、移除、上传按钮</td> 
   <td>file-caption-main</td> 
  </tr> 
  <tr> 
   <td>frameClass</td> 
   <td>String</td> 
   <td>额外应用于每个文件缩略图框架的CSS类</td> 
   <td>krajee-default</td> 
  </tr> 
  <tr> 
   <td>purifyHtml</td> 
   <td>Boolean</td> 
   <td>是否在预览中净化HTML内容类型显示的HTML内容。这个功能需要加载cure53的DOM净化插件。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>fileSizeGetter</td> 
   <td>Boolean</td> 
   <td>基于byte参数生成易于理解的文件大小的回调函数</td> 
   <td>function (bytes) { var i = Math.floor(Math.log(bytes) / Math.log(1024)), sizes = [‘B’, ‘KB’, ‘MB’, ‘GB’, ‘TB’, ‘PB’, ‘EB’, ‘ZB’, ‘YB’]; return (bytes / Math.pow(1024, i)).toFixed(2) * 1 + ’ ’ + sizes[i]}</td> 
  </tr> 
  <tr> 
   <td>initialPreview</td> 
   <td>Array/Object</td> 
   <td>要显示的初始预览内容。你可以传递最小的HTML标记来显示你的图像、文本或文件。如果设置为字符串，则如果没有分隔符，就会在初始预览中显示单个文件。你可以设置分隔符（在initialDelimiter中定义）以在初始预览中显示多个文件。如果设置为数组，它会在初始预览中显示数组中所有的文件（对多个文件上传场景有用）。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>initialPreviewCount</td> 
   <td>int</td> 
   <td>将添加到预览中选择的文件数的初始预览项的数量。当overwriteInitial设置为false时，在显示正确的标题的情况下适用。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>initialPreviewDelimiter</td> 
   <td>String</td> 
   <td>用于将初始预览内容分割为单个文件缩略图的分隔符（只有当initialPreview参数传入一个字符串而非数组时有效）。</td> 
   <td><em>$$</em></td> 
  </tr> 
  <tr> 
   <td>initialPreviewAsData</td> 
   <td>Boolean</td> 
   <td>是否将初始预览内容集解析为数据而不是原始标记语言。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>initialPreviewFileType</td> 
   <td>String</td> 
   <td>在previewSettings中的键内配置的文件模板类型之一。这对于识别用于显示特定文件的内容的模板很有用。</td> 
   <td>‘image’</td> 
  </tr> 
  <tr> 
   <td>initialPreviewConfig</td> 
   <td>Array/Object</td> 
   <td>为每个initialPreview条目（就是initialPreview中的每个预览）设置重要属性的配置。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>initialPreviewShowDelete</td> 
   <td>Boolean</td> 
   <td>是否为每个使用initialPreview创建的缩略图显示删除按钮</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>removeFromPreviewOnError</td> 
   <td>Boolean</td> 
   <td>文件缩略图是否应该从预览中删除异常缩略图</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>previewThumbTags</td> 
   <td>Array</td> 
   <td>它是缩略图模板中使用的一组标签，将在缩略图渲染时用缩略图标记动态替换。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>initialPreviewThumbTags</td> 
   <td>Array</td> 
   <td>这是previewThumbTags的扩展，专门用于初始预览内容–但将被配置为与每个初始预览缩略图对应的对象数组。通过initialPreview设置的初始预览缩略图将读取此配置以替换标签。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>initialCaption</td> 
   <td>String</td> 
   <td>要显示的初始预览标题文本。如果你在这没有设置并且initialPreview设置为true，那么这个参数默认设置为"{preview-file-count} files selected"， {preview-file-count}是在initialPreview中上传的文件的计数。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>overwriteInitial</td> 
   <td>Boolean</td> 
   <td>是否要覆盖初始预览内容和标题设置。默认为true，因此当新文件上传或文件被清除时任何initialPreview内容集将被覆盖。将其设置为false将有助于始终显示从数据库中保存的图像或文件，尤其是在使用多文件上传功能时尤其有用。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>layoutTemplates</td> 
   <td>Object</td> 
   <td>渲染布局每部分的模板配置</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>previewTemplates</td> 
   <td>Object</td> 
   <td>用于渲染每个预览文件类型的模板配置</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

[Link 1]: http://www.bootstrap-fileinput.com/options.html