首页 > 代码库 > fileInput
fileInput
language |
字符串, 用于插件的语言配置, 使插件能够为您的区域设置显示消息 (必须为该语言设置 ISO 代码)。您可以在同一页上有多个语言小部件。语言代码的区域设置 JS 文件必须按照 "翻译" 一节中所述定义。文件必须在 fileinput 之后加载。 |
theme |
字符串, 用于插件的主题 (如果未设置, 将默认为内置主题)。使用发布 v4.3.2, fileinput 插件支持高级主题, 并能够在同一页面上为多个小部件提供单独的主题。为此, 请按照下列简单步骤操作: 加载您需要的主题 JS 文件 (如 aathemes/fa/jsaa 字体真棒主题)。必须在 fileinput. js 之后加载主题文件。 将插件中的主题属性设置为所需的主题, 并在上面的主题配置 JS 文件 (如 "fa") 中设置。
该插件还会自动将 CSS 选择器主题-<theme-name> 置于文件输入容器中, 以便您可以重写您的样式。这些主题的 CSS 可以由社区提交的主题/THEME_NAME 文件夹的回购。
|
| required | 布尔值, 在上载 (用于 ajax) 或提交表单之前, 是否必须选择文件 (对于 non-ajax)。如果设置为 true, 并且在上载之前未选择文件, 则将显示 msgFilerequired 中设置的错误消息。默认为 false。 检查所需的验证演示, 了解有关如何使用此属性的详细信息。 |
rtl |
布尔值, 是否以右向左 (RTL) 模式定位小部件。要查看 rtl 方向, 您必须将其设置为 true, 并且还必须在 css/fileinput 后加载 css/fileinput-rtl. css 文件, 用于 rtl 样式的页面。默认为 false。 查看 RTL 使用演示, 了解有关如何使用此属性的详细信息。 |
hiddenThumbnailContent |
布尔值, 是否隐藏缩略图中的预览内容 (图像、pdf 内容、文本内容等)。默认为 false。如果设置为 true, 则只显示 "缩略图页脚" 版式模板中定义的文件名和文件大小。 检查 Glyphicon 主题替代演示, 了解有关如何使用此属性的详细信息。 |
showCaption |
布尔值, 是否显示文件标题。默认为 true。 |
showPreview |
|
showRemove |
布尔值, 是否显示文件删除/清除按钮。默认为 true。 |
showUpload |
布尔值, 是否显示文件上传按钮。默认为 true。当未指定 uploadUrl 时, 这将默认为 non-ajax 方案的 "表单提交" 按钮。对于 ajax 上载方案, 这将使用 uploadUrl 作为链接。 |
showCancel |
|
showClose |
|
showUploadedThumbs |
|
showBrowse |
|
browseOnZoneClick |
|
autoReplace |
|
autoOrientImage |
|
captionClass |
|
previewClass |
|
mainClass |
|
frameClass |
|
purifyHtml |
|
fileSizeGetter |
布尔值, 根据字节参数生成人友好文件大小的回调。如果未设置, 将默认为以下回调: |
initialPreview |
字符串 |数组中要显示的初始预览内容。您可以通过最小的 HTML 标记来显示您的图像、文本或文件。如果设置为字符串, 则如果没有分隔符, 则在初始预览中显示单个文件。可以设置分隔符 (在 initialDelimiter 中定义) 以在初始预览中显示多个文件。如果设置为数组, 它将将数组中的所有文件显示为初始预览 (对于多个文件上载方案很有用)。 根据插件样式主题, 将需要添加以下 CSS 类以显示每个文件类型:
图像文件: 包括 CSS 类文件-预览-图像
文本文件: 包括 CSS 类文件-预览-文本
其他文件: 包括 CSS 类文件-预览-其他
如何为初始预览设置各种文件的示例: |
initialPreviewCount |
int, 将添加到 "预览" 中选定的文件计数的初始预览项的计数。这在显示正确的标题时适用, whenoverwriteInitial 设置为 false。 |
initialPreviewDelimiter |
字符串, 用于将初始预览内容拆分为单个文件缩略图的分隔符 (仅适用于将 initialPreview 作为字符串而不是数组传递)。默认值为 * $。 |
initialPreviewAsData |
布尔值, 是否将初始预览内容集解析为数据而不是原始标记。默认为 false 以向后兼容 (在 v4.3.2 之前) |
initialPreviewFileType |
字符串, 在 previewSettings 中的键中配置的文件模板类型之一。这对于标识用于显示特定文件内容的模板很有用。默认为图像。 |
initialPreviewConfig |
数组, 用于为每个 initialPreview 项设置重要属性的配置 (作为 initialPreview 的一部分设置)。数组中的每个元素都应是由以下键组成的对象/关联数组: 类型: 字符串, 在 previewSettings 中的键内配置的文件模板类型之一。这将覆盖 initialPreviewFileType 设置。这对于标识用于显示特定文件内容的模板很有用。
文件: 字符串, 文件 mime 类型来标识内容。适用于某些文件模板, 如音频或视频 (例如 video/mp4)。
大小: 浮动, 以字节为单位的文件大小, 将使用 "大小" 布局模板显示。如果未设置或无法将其解析为浮点数字, 则将显示一个空字符串。
previewAsData: 布尔值, 是否将此预览内容分析为数据输入而不是原始标记源。这将覆盖 initialPreviewAsData 设置。
标题: 字符串, 为每个初始预览项内容显示的标题或文件名。
宽度: 字符串, 显示图像/内容的 CSS 宽度。
url: 字符串, 用于在初始预览中通过 AJAX post 响应删除图像/内容的 url。如果未设置, 将默认为 deleteUrl。
键: 字符串 |对象, 将作为数据通过 AJAX POST 传递给 url 的密钥。
frameClass: 字符串, 为文件的缩略图框架设置的附加框架 css 类。
frameAttr: 对象, 缩略图框架的 HTML 属性设置 (设置为键: 值对)。
额外: 对象 |函数, 将作为数据传递到初始预览的额外数据删除 url/AJAX 服务器通过 POST 调用。如果未设置, 将默认为 deleteExtraData。
请注意, initialPreview 和 initialPreviewConfig 也可以在不呈现整个标记但只是传递数据的情况下更容易地设置。为此, initialPreviewAsData 属性必须设置为 true, 并且预览将使用初始预览类型的模板呈现。在 theinitialPreviewConfig 中, 类型键将标识传递的数据的预览文件类型。 例如, 可以通过以下方式将初始预览设置为数据:
ajax 删除操作将通过 POST 将以下数据发送到服务器: key: 在 initialPreviewConfig 中设置为设置键 [‘key‘] extra:额外的数据通过 initialPreviewConfig [‘ extra ‘] 或 deleteExtraData, 如果前者没有设置。
|
initialPreviewShowDelete |
bool, 是否将为使用 initialPreview 创建的每个缩略图显示 "删除" 按钮。 |
removeFromPreviewOnError |
bool, 是否应从错误预览中删除文件缩略图。默认为 false。 |
previewThumbTags |
数组, 这将是缩略图模板中使用的标记列表, 在呈现缩略图时将在缩略图标记中动态替换。例如: |
initialPreviewThumbTags |
数组, 这是特定于初始预览内容的 previewThumbTags 的扩展, 但将配置为与每个初始预览缩略图对应的对象数组。通过 initialPreview 设置的初始预览缩略图将读取此配置以替换标记。扩展示例:
|
deleteExtraData |
对象 |函数将作为数据传递到初始预览删除 url/AJAX 服务器通过 POST 调用的额外数据。这将被 initialPreviewConfig [额外 ‘] 属性覆盖。此属性仅适用于初始预览中的 ajax 删除, 以及为 initialPreviewConfig ["url"] 或 deleteUrl 设置了值。 可以将其设置为对象 (键和值的关联数组) 或函数回调。作为一个对象, 可以将其设置为例如:
作为函数回调, 它可以设置为例如:
注意
ajax 删除操作将通过 POST 将以下数据发送到服务器:
密钥: 在 initialPreviewConfig 中设置为设置键 [‘ 键 ‘]
任何其他作为键传递的额外数据: 值对通过 initialPreviewConfig ["额外"] 或 deleteExtraData, 如果前者没有设置。
|
deleteUrl |
字符串, 用于在初始预览中通过 AJAX post 响应删除图像/内容的 URL。这将被 initialPreviewConfig [‘ url ‘] 属性覆盖。 |
initialCaption |
字符串, 将显示初始预览标题文本。如果没有在此处设置值, 并且 initialPreview 设置为 true, 则默认为 "{预览-文件-计数} 文件", 其中 {预览文件计数} 是在 initialPreview 中传递的文件的计数。 |
overwriteInitial |
布尔值, 无论您希望改写初始预览内容还是设置标题。这默认为 true, 即在上载新文件或清除文件时, 将覆盖任何 initialPreview 内容集。将其设置为 false 将有助于在数据库中显示保存的图像或文件, 特别是在使用多文件上载功能时尤其有用。 |
layoutTemplates |
对象用于呈现布局的每个部分的模板配置。您可以设置以下模板来控制小部件布局:
main1: 用于呈现带有标题的小部件的模板。
main2: 用于呈现无标题的小部件的模板。
预览: 用于呈现预览的模板。
fileIcon: 在标题文本前呈现的图标。
大小: 用于在缩略图中显示文件大小的模板。应使用标记 {sizeText} 来呈现大小数据。
标题: 用于呈现标题的模板。
模式: 用于呈现模式的模板 (用于文件内容预览缩放)。
进度: 上载过程中进度条的模板 (对于批处理/成批上载以及在每个异步/单次上载的预览缩略图内)。在每个缩略图中显示的上载进度栏将被包装在具有 "文件-拇指-进度" CSS 类的容器内。将自动分析和替换以下标记:
{百分比}: 将替换为上载进度百分比。
页脚: 每个文件预览缩略图的页脚部分的模板。将自动分析和替换以下标记:
{操作}: 将替换为操作模板的输出。
操作: 要在缩略图页脚中显示的文件操作按钮的模板。将自动分析和替换以下标记:
{上载}: 将替换为 actionUpload 模板的输出。
{delete}: 将替换为 actionDelete 模板的输出。
actionDelete: 缩略图页脚中的 "文件删除操作" 按钮的模板。将自动分析和替换以下标记:
{removeClass}: "删除" 按钮的 css 类。将替换为在 fileActionSettings 中设置的 removeClass。
{removeIcon}: "删除" 按钮的图标。将替换为在 fileActionSettings 中设置的 removeIcon。
{removeTitle}: "删除" 按钮悬停时显示的标题。将替换为在 fileActionSettings 中设置的 removeTitle。
{dataUrl}: 用于删除 initialPreview 内容的文件缩略图的 URL。将替换为 initialPreviewConfig 中的 url 集。
{数据}: 将通过 POST 传递到 AJAX 调用的上述 URL 的密钥 (附加数据)。将替换为 initialPreviewConfig 中的密钥集。
actionUpload: 缩略图页脚中的 "文件上载操作" 按钮的模板。
{uploadClass}: "上载" 按钮的 css 类。将替换为在 fileActionSettings 中设置的 uploadClass。
{uploadIcon}: "上载" 按钮的图标。将替换为在 fileActionSettings 中设置的 uploadIcon。
{uploadTitle}: 在 "上载" 按钮上悬停时显示的标题。将替换为在 fileActionSettings 中设置的 uploadTitle。
main1 和 main2 模板将自动解析以下替换标记:
{class}: 在 mainClass 属性中设置的 CSS 类。
{关闭}: 将替换为关闭 (交叉) 图标 (默认情况下在预览窗口的右上)。要控制此标记的布局模板 layoutTemplates. 关闭。
{预览}: 由 previewTemplate 分析的内容, 只有在 showPreview 为真时才会显示。
{标题}: 由 captionTemplate 分析的内容, 只有在 showCaption 为真时才会显示。
{size}: 由 layoutTemplates 大小分析的内容。
{删除}: 文件删除/清除按钮, 仅当 showRemove 为真时才显示。
{上载}: 文件上载按钮, 仅当 showUpload 为真时才显示。
{取消}: 将在 ajax 上载过程中显示的文件上载取消按钮以中止 ajax 上载。
{浏览}: 主文件浏览按钮以选择要输入的文件。
进度模板将自动分析以下替换标记:
{class}: 在 progressClass 或 progressCompleteClass 属性中设置的 CSS 类 (取决于进度百分比)。
预览和标题模板可以理解以下将被替换的特殊标记:
{class}: 在 mainClass、captionClass 或 previewClass 属性中设置的 CSS 类。
layoutTemplates 如果未设置, 将默认为:
下面的模板将用于呈现用于上载、删除、取消和浏览的主按钮。 btnDefault: 用于上载、删除和取消按钮的模板。
btnLink: 与 ajax 一起使用时的上传按钮模板 (即设置 uploadUrl 时)。
btnBrowse: "浏览" 按钮的模板。
以下标记将被解析, 并在上面的按钮模板中自动替换:
{类型}: HTML 按钮类型, 默认为按钮的大多数按钮和提交的基于表单的上传。
{标题}: 按钮悬停时显示的标题。
{css}: 按钮的 css 类。这是从 uploadClass 或 removeClass 或 cancelClass 或 browseClass 的设置派生的。
{状态}: 按钮的禁用状态 (如果可用) (否则将为空)。
{图标}: 由 uploadIcon 或 removeIcon 或 cancelIcon 或 browseIcon 标识的按钮图标。
{标签}: 由 uploadLabel 或 removeLabel 或 cancelLabel 或 browseLabel 标识的按钮标签。
{href}: 仅适用于 ajax 上载的上载按钮, 并将替换为 uploadUrl 属性。
|
previewTemplates |
对象用于呈现每个预览文件类型的模板配置。识别以下文件类型:
图像: 图像文件的预览模板。
文本: 文本文件的预览模板。
html: html 文件的预览模板。
视频: 视频文件的预览模板 (由 HTML 5 视频标签支持)。
音频: 音频文件的预览模板 (由 HTML 5 音频标签支持)。
闪存: flash 文件的预览模板 (当前支持 webkit 浏览器)。
对象: 所有其他文件的预览模板-默认情况下视为对象。要禁用此行为, 请配置 allowedPreviewTypes 属性。
泛型: 此模板仅用于呈现直接作为原始格式传递的 initialPreview 标记内容。
下列标记将在每个模板中进行分析和替换:
{rtl}: 当 rtl 设置为 true 时, 将设置为 kv rtl css 类, 否则将为空字符串。
{previewId}: 将替换为预览框架容器的生成标识符。
{模板}: 将替换为文件模板类型 (如图像、文本等)
{data}: 将替换为每个预览类型的数据源。
{宽度}: 将替换为 previewSettings 中设置的文件类型的宽度。
{高度}: 将替换为 previewSettings 中设置的文件类型的高度。
{标题}: 将替换为文件名。
{类型}: 将替换为文件类型。
{内容}: 此操作仅适用于泛型模板。它将替换为 initialPreview 中设置的原始 HTML 标记。上述所有标记都不会为泛型模板进行分析。
{对话}: 当前仅适用于文本文件预览。将用 JS 代码替换为启动模式对话框。
{zoomTitle}: 当前仅适用于文本文件预览。这将被替换为 msgZoomTitle 属性。这是在 "缩放" 按钮悬停时显示的标题 (单击时将显示文本文件)。
{zoomInd}: 当前仅适用于文本文件预览。这将被替换为 zoomIndicator 属性。这是在 "缩放" 按钮悬停时显示的标题 (单击时将显示文本文件)。
{标题}: 当前仅适用于文本文件预览。这表示模式对话框标题标题。这将被替换为 msgZoomModalHeading 属性。
如前所述, 如果您来自早期版本 (在 v2.4.0 之前), 则所有预览模板都已组合成一个属性, 而不是图像、文本等单独的模板。
上述模板中使用的常量值如下所示: 在:
{previewFileIcon}: 对应于 previewFileIcon 属性。
{previewFileIconClass}: 对应于 previewFileIconClass 属性。
|
previewZoomSettings |
对象, 对显示在缩放模式预览中的内容的 HTML 属性的配置。配置类似于 previewSettings, 但是您可以在此属性中设置其他 HTML 属性, 使其超出宽度和高度。此属性将覆盖 previewSettings 中的配置。您可以设置 HTML 样式属性所支持的所有 CSS 样式属性。默认为每个文件类型的以下配置: |
previewZoomButtonIcons |
对象, 在详细预览中显示各种缩放控制按钮的图标。可以设置以下按钮:
上一个: 按钮在模式预览中导航到以前的文件内容
下一步: 按钮导航到模式预览中的下一个文件内容
toggleheader: 按钮切换显示和滑动/在模态头
全屏: 按钮切换放大预览到全屏显示
无国界: 按钮切换预览到一个无边框的最大化状态 (仅与全屏按钮的区别在于它不将浏览器设置为本机全屏模式)
关闭: 关闭模式缩放预览对话框的按钮
previewZoomButtonIcons 默认为以下配置:
|
previewZoomButtonClasses |
对象, 要为详细预览中的缩放控件按钮设置的 CSS 类。可以设置以下按钮:
上一个: 按钮在模式预览中导航到以前的文件内容
下一步: 按钮导航到模式预览中的下一个文件内容
toggleheader: 按钮切换显示和滑动/在模态头
全屏: 按钮切换放大预览到全屏显示
无国界: 按钮切换预览到一个无边框的最大化状态 (仅与全屏按钮的区别在于它不将浏览器设置为本机全屏模式)
关闭: 关闭模式缩放预览对话框的按钮
previewZoomButtonClasses 默认为以下配置:
|
preferIconicPreview |
布尔值, 是否使用 previewFileIconSettings andpreviewFileExtSettings 的配置强制预览区域中的文件缩略图的标志性预览。默认为 false。如果设置为 true, 它将尝试强制图标文件缩略图预览 (如果可能)。 |
preferIconicZoomPreview |
布尔值, 是否在详细的缩放预览区域中强制使用 previewFileIconSettings 和 previewFileExtSettings 的配置对文件缩略图进行标志性预览。默认为 false。如果设置为 true, 它将尝试强制对详细的缩放内容进行标志性预览 (如果可能)。 |
previewZoomButtonTitles |
对象, 在详细预览中为缩放控件按钮设置的标题。可以设置以下按钮:
上一个: 按钮在模式预览中导航到以前的文件内容
下一步: 按钮导航到模式预览中的下一个文件内容
toggleheader: 按钮切换显示和滑动/在模态头
全屏: 按钮切换放大预览到全屏显示
无国界: 按钮切换预览到一个无边框的最大化状态 (仅与全屏按钮的区别在于它不将浏览器设置为本机全屏模式)
关闭: 关闭模式缩放预览对话框的按钮
previewZoomButtonClasses 默认为以下配置:
|
allowedFileTypes |
数组的允许文件类型的列表上载。默认设置为 null, 这意味着插件支持所有用于上载的文件类型。如果找到无效的文件类型, 则会引发 msgInvalidFileType 中设置的验证错误消息。fileTypeSettings 中设置的下列类型可用于安装。 |
allowedFileExtensions |
数组允许上载的文件扩展名列表。默认设置为 null, 这意味着插件支持上载的所有文件扩展名。如果找到无效的文件扩展名, 则会引发 msgInvalidFileExtension 中设置的验证错误消息。此设置的一个示例可以是: 你需要小心, 以防你设置 allowedFileTypes 和 allowedFileExtensions。在这种情况下, allowedFileTypes 属性首先被验证, 并且通常在 allowedFileExtensions 设置之前 (并且后一种验证可能被跳过)。 |
allowedPreviewTypes |
数组的小部件的允许预览类型列表。默认情况下, 此选项支持预览的所有文件类型。默认情况下, 插件将每个文件视为一个对象, 如果它与以前的任何类型都不匹配。若要禁用此行为, 可以从 allowedPreviewTypes 列表中移除对象, 或通过 allowedPreviewMimeTypes 对其进行微调. 若要禁用所有文件类型的内容预览并将 previewIcon 显示为缩略图, 请将其设置为 null、空或 false。 默认设置如下:
|
allowedPreviewMimeTypes |
阵列允许预览的 mime 类型列表。默认情况下, 此设置为 null, 这意味着允许所有可能的 mime 类型。此设置与 allowedPreviewTypes 结合使用, 仅筛选允许预览的所需文件类型。如果需要, 您可以检查此列表中允许的 mime 类型。 |
defaultPreviewContent |
字符串, 则在清除文件或清除输入时, 默认情况下在预览窗口中显示的默认内容/标记。这对于在上载到覆盖之前显示默认用户配置文件图片或配置文件图像的用例非常有用。这与 initialPreview 在意义上有点不同, initialPreview 内容将始终显示, 除非它是根据 overwriteInitial 删除或覆盖。另一方面, defaultPreviewContent 只会在初始化或清除预览时显示。在其他时间, 当文件被选中时, 这将被暂时覆盖, 直到选定的文件被清除。 此属性可用于在预览窗口中显示默认用户配置文件图片 (或保存的图片), 除非用户选择图片。查看头像上传演示示例详细信息 |
customLayoutTags |
对象将在布局模板中替换的其他自定义标记的列表。这应该是键的关联数组对象: 值对, 其中:
键: 字符串, 是要替换的标记, 建议将其括在大括号中。
值: 字符串 | 函数, 是将替换上面的标记键的值。可以将其设置为字符串或回调函数。
|
customPreviewTags |
对象将在预览模板中替换的其他自定义标记的列表。这应该是键的关联数组对象: 值对, 其中: 键: 字符串, 是要替换的标记, 建议将其括在大括号中。
值: 字符串 | 函数, 是将替换上面的标记键的值。可以将其设置为字符串或回调函数。
|
previewSettings |
对象用于呈现每个预览文件类型的格式设置 (宽度和高度)。默认设置如下: |
fileTypeSettings |
对象设置, 以便在选择要上载的文件时验证和标识每个文件类型。这是一个回调列表, 它接受文件 mime 类型和文件名作为参数。默认设置如下: |
previewFileIcon |
字符串, 当检测到不可读的预览文件类型时, 将在每个预览文件缩略图中显示的图标。默认为 <i class="glyphicon glyphicon-file"> </i> 。 |
previewFileIconClass |
字符串, 将应用于预览文件图标容器的 CSS 类。默认为文件-其他图标。 |
previewFileIconSettings |
对象每个文件扩展名 (类型) 的预览图标标记设置。您需要将其设置为 key: 值对, 其中密钥对应于文件扩展名 (如 doc、docx、xls 等), 并且该值对应于要呈现的图标的标记。如果未设置此值, 或者此处未设置文件扩展名, 则预览将默认为 previewFileIcon。请注意, 显示图标而不是文件内容是通过 allowedPreviewTypes 和 allowedPreviewMimeTypes 控制的 您可以设置 previewFileIconSettings, 如下所示: |
previewFileExtSettings |
|
buttonLabelClass |
|
browseLabel |
|
browseIcon |
|
browseClass |
|
removeLabel |
|
removeIcon |
|
removeClass |
|
removeTitle |
|
uploadLabel |
|
uploadIcon |
|
uploadClass |
|
uploadTitle |
|
uploadUrl |
|
uploadAsync |
|
uploadExtraData |
|
zoomModalHeight |
|
minImageHeight |
|
maxImageHeight |
|
minImageWidth |
|
maxImageWidth |
|
resizeImage |
|
resizePreference |
|
fileInput