fileInput

language

theme

加载您需要的主题 JS 文件 (如 aathemes/fa/jsaa 字体真棒主题)。必须在 fileinput. js 之后加载主题文件。

将插件中的主题属性设置为所需的主题, 并在上面的主题配置 JS 文件 (如 "fa") 中设置。

该插件将从 JS 文件中自动读取主题名称的主题配置, 从 fileinputThemes ["<theme-name>"] (例如, 通过 fileinputThemes ["<theme-name>")。

该插件还会自动将 CSS 选择器主题-<theme-name> 置于文件输入容器中, 以便您可以重写您的样式。这些主题的 CSS 可以由社区提交的主题/THEME_NAME 文件夹的回购。

如果需要, 您可以另外加载任何主题特定的 CSS 文件。

检查所需的验证演示, 了解有关如何使用此属性的详细信息。

rtl

查看 RTL 使用演示, 了解有关如何使用此属性的详细信息。

hiddenThumbnailContent

检查 Glyphicon 主题替代演示, 了解有关如何使用此属性的详细信息。

showCaption

showPreview

showRemove

showUpload

showCancel

showClose

showUploadedThumbs

showBrowse

browseOnZoneClick

autoReplace

autoOrientImage

captionClass

previewClass

mainClass

frameClass

purifyHtml

fileSizeGetter

initialPreview

根据插件样式主题, 将需要添加以下 CSS 类以显示每个文件类型:

图像文件: 包括 CSS 类文件-预览-图像

文本文件: 包括 CSS 类文件-预览-文本

其他文件: 包括 CSS 类文件-预览-其他

如何为初始预览设置各种文件的示例:

initialPreviewCount

initialPreviewDelimiter

initialPreviewAsData

initialPreviewFileType

initialPreviewConfig

类型: 字符串, 在 previewSettings 中的键内配置的文件模板类型之一。这将覆盖 initialPreviewFileType 设置。这对于标识用于显示特定文件内容的模板很有用。

文件: 字符串, 文件 mime 类型来标识内容。适用于某些文件模板, 如音频或视频 (例如 video/mp4)。

大小: 浮动, 以字节为单位的文件大小, 将使用 "大小" 布局模板显示。如果未设置或无法将其解析为浮点数字, 则将显示一个空字符串。

previewAsData: 布尔值, 是否将此预览内容分析为数据输入而不是原始标记源。这将覆盖 initialPreviewAsData 设置。

标题: 字符串, 为每个初始预览项内容显示的标题或文件名。

宽度: 字符串, 显示图像/内容的 CSS 宽度。

url: 字符串, 用于在初始预览中通过 AJAX post 响应删除图像/内容的 url。如果未设置, 将默认为 deleteUrl。

键: 字符串 |对象, 将作为数据通过 AJAX POST 传递给 url 的密钥。

frameClass: 字符串, 为文件的缩略图框架设置的附加框架 css 类。

frameAttr: 对象, 缩略图框架的 HTML 属性设置 (设置为键: 值对)。

额外: 对象 |函数, 将作为数据传递到初始预览的额外数据删除 url/AJAX 服务器通过 POST 调用。如果未设置, 将默认为 deleteExtraData。

initialPreviewConfig 的一个示例配置 (对于以前设置的 initialPreviewContent) 可以是:

请注意, initialPreview 和 initialPreviewConfig 也可以在不呈现整个标记但只是传递数据的情况下更容易地设置。为此, initialPreviewAsData 属性必须设置为 true, 并且预览将使用初始预览类型的模板呈现。在 theinitialPreviewConfig 中, 类型键将标识传递的数据的预览文件类型。

例如, 可以通过以下方式将初始预览设置为数据:

ajax 删除操作将通过 POST 将以下数据发送到服务器:

key: 在 initialPreviewConfig 中设置为设置键 [‘key‘]

extra:额外的数据通过 initialPreviewConfig [‘ extra ‘] 或 deleteExtraData, 如果前者没有设置。

initialPreviewShowDelete

removeFromPreviewOnError

previewThumbTags

initialPreviewThumbTags

deleteExtraData

可以将其设置为对象 (键和值的关联数组) 或函数回调。作为一个对象, 可以将其设置为例如:

作为函数回调, 它可以设置为例如:

注意

ajax 删除操作将通过 POST 将以下数据发送到服务器:

密钥: 在 initialPreviewConfig 中设置为设置键 [‘ 键 ‘]

任何其他作为键传递的额外数据: 值对通过 initialPreviewConfig ["额外"] 或 deleteExtraData, 如果前者没有设置。

deleteUrl

initialCaption

overwriteInitial

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

previewZoomButtonIcons

上一个: 按钮在模式预览中导航到以前的文件内容

下一步: 按钮导航到模式预览中的下一个文件内容

toggleheader: 按钮切换显示和滑动/在模态头

全屏: 按钮切换放大预览到全屏显示

无国界: 按钮切换预览到一个无边框的最大化状态 (仅与全屏按钮的区别在于它不将浏览器设置为本机全屏模式)

关闭: 关闭模式缩放预览对话框的按钮

previewZoomButtonIcons 默认为以下配置:

previewZoomButtonClasses

上一个: 按钮在模式预览中导航到以前的文件内容

下一步: 按钮导航到模式预览中的下一个文件内容

toggleheader: 按钮切换显示和滑动/在模态头

全屏: 按钮切换放大预览到全屏显示

无国界: 按钮切换预览到一个无边框的最大化状态 (仅与全屏按钮的区别在于它不将浏览器设置为本机全屏模式)

关闭: 关闭模式缩放预览对话框的按钮

previewZoomButtonClasses 默认为以下配置:

preferIconicPreview

preferIconicZoomPreview

previewZoomButtonTitles

上一个: 按钮在模式预览中导航到以前的文件内容

下一步: 按钮导航到模式预览中的下一个文件内容

toggleheader: 按钮切换显示和滑动/在模态头

全屏: 按钮切换放大预览到全屏显示

无国界: 按钮切换预览到一个无边框的最大化状态 (仅与全屏按钮的区别在于它不将浏览器设置为本机全屏模式)

关闭: 关闭模式缩放预览对话框的按钮

previewZoomButtonClasses 默认为以下配置:

allowedFileTypes

allowedFileExtensions

你需要小心, 以防你设置 allowedFileTypes 和 allowedFileExtensions。在这种情况下, allowedFileTypes 属性首先被验证, 并且通常在 allowedFileExtensions 设置之前 (并且后一种验证可能被跳过)。

allowedPreviewTypes

默认设置如下:

[‘image‘, ‘html‘, ‘text‘, ‘video‘, ‘audio‘, ‘flash‘, ‘object‘]

allowedPreviewMimeTypes

defaultPreviewContent

此属性可用于在预览窗口中显示默认用户配置文件图片 (或保存的图片), 除非用户选择图片。查看头像上传演示示例详细信息

customLayoutTags

键: 字符串, 是要替换的标记, 建议将其括在大括号中。

值: 字符串 | 函数, 是将替换上面的标记键的值。可以将其设置为字符串或回调函数。

customPreviewTags

键: 字符串, 是要替换的标记, 建议将其括在大括号中。

值: 字符串 | 函数, 是将替换上面的标记键的值。可以将其设置为字符串或回调函数。

previewSettings

fileTypeSettings

previewFileIcon

previewFileIconClass

previewFileIconSettings

您可以设置 previewFileIconSettings, 如下所示:

previewFileExtSettings

buttonLabelClass

browseLabel

browseIcon

browseClass

removeLabel

removeIcon

removeClass

removeTitle

uploadLabel

uploadIcon

uploadClass

uploadTitle

uploadUrl

uploadAsync

uploadExtraData

zoomModalHeight

minImageHeight

maxImageHeight

minImageWidth

maxImageWidth

resizeImage

resizePreference