data 属性传递。31、支持翻译和区域设置。
language |
字符串, 用于插件的语言配置, 使插件能够为您的区域设置显示消息 (必须为该语言设置 ISO 代码)。您可以在同一页上有多个语言小部件。语言代码的区域设置 JS 文件必须按照 "翻译" 一节中所述定义。文件必须在 fileinput 之后加载。 | string, language configuration for the plugin to enable the plugin to display messages for your locale (you must set the ISO code for the language). You can have multiple language widgets on the same page. The locale JS file for the language code must be defined as mentioned in the translationssection. The file must be loaded after fileinput.js.
|
theme |
字符串, 用于插件的主题 (如果未设置, 将默认为内置主题)。使用发布 v4.3.2, fileinput 插件支持高级主题, 并能够在同一页面上为多个小部件提供单独的主题。为此, 请按照下列简单步骤操作: 加载您需要的主题 JS 文件 (如 aathemes/fa/jsaa 字体真棒主题)。必须在 fileinput. js 之后加载主题文件。 将插件中的主题属性设置为所需的主题, 并在上面的主题配置 JS 文件 (如 "fa") 中设置。
该插件还会自动将 CSS 选择器主题-<theme-name> 置于文件输入容器中, 以便您可以重写您的样式。这些主题的 CSS 可以由社区提交的主题/THEME_NAME 文件夹的回购。
|
string, theme to use for the plugin (will default to the inbuilt theme if not set). With release v4.3.2, the fileinput plugin supports advanced theming and ability to have separate themes for multiple widgets on the same page. To do this, follow these simple steps:
|
| required | 布尔值, 在上载 (用于 ajax) 或提交表单之前, 是否必须选择文件 (对于 non-ajax)。如果设置为 true, 并且在上载之前未选择文件, 则将显示 msgFilerequired 中设置的错误消息。默认为 false。 检查所需的验证演示, 了解有关如何使用此属性的详细信息。 |
boolean, whether file selection is mandatory before upload (for ajax) or submit of the form (for non-ajax). When set to true, and if files are not selected before upload, this will show the error message as set in msgFilerequired. Defaults to false. Check the required validation demos for understanding details on how to use this property. |
rtl |
布尔值, 是否以右向左 (RTL) 模式定位小部件。要查看 rtl 方向, 您必须将其设置为 true, 并且还必须在 css/fileinput 后加载 css/fileinput-rtl. css 文件, 用于 rtl 样式的页面。默认为 false。 查看 RTL 使用演示, 了解有关如何使用此属性的详细信息。 |
boolean, whether to orient the widget in Right-To-Left (RTL) mode. To view RTL orientation you must set this to true and also must load thecss/fileinput-rtl.css file after the css/fileinput.css on your page for RTL styling. Defaults to false. Check the RTL usage demo for understanding details on how to use this property. |
hiddenThumbnailContent |
布尔值, 是否隐藏缩略图中的预览内容 (图像、pdf 内容、文本内容等)。默认为 false。如果设置为 true, 则只显示 "缩略图页脚" 版式模板中定义的文件名和文件大小。 检查 Glyphicon 主题替代演示, 了解有关如何使用此属性的详细信息。 |
boolean, whether to hide the preview content (image, pdf content, text content, etc.) within the thumbnail. Defaults to false. When set to true, only the file name and file size as defined in the thumbnail footer layout template will be displayed. Check the Glyphicon Theme Alternate Demo for understanding details on how to use this property. |
showCaption |
布尔值, 是否显示文件标题。默认为 true。 | boolean, whether to display the file caption. Defaults to true.
|
showPreview |
boolean, whether to display the file preview. Defaults to true.
|
|
showRemove |
布尔值, 是否显示文件删除/清除按钮。默认为 true。 | boolean, whether to display the file remove/clear button. Defaults to true.
|
showUpload |
布尔值, 是否显示文件上传按钮。默认为 true。当未指定 uploadUrl 时, 这将默认为 non-ajax 方案的 "表单提交" 按钮。对于 ajax 上载方案, 这将使用 uploadUrl 作为链接。 | boolean, whether to display the file upload button. Defaults to true. This will default to a form submit button for a non-ajax scenario when the uploadUrl is not specified. For an ajax upload scenario, this will use the uploadUrl as a link. |
showCancel |
boolean, whether to display the file upload cancel button. Defaults to true. This will be only enabled and displayed when an AJAX upload is in process.
|
|
showClose |
boolean, whether to display the close icon in the preview. Defaults to `true`. This will be only parsed when showPreview is true or when you are using the{close} tag in your preview templates | |
showUploadedThumbs |
boolean, whether to persist display of the uploaded file thumbnails in the preview window (for ajax uploads) until the remove/clear button is pressed. Defaults to true. When set to false, a next batch of files selected for upload will clear these thumbnails from preview | |
showBrowse |
boolean, whether to display the file browse button. Defaults to true | |
browseOnZoneClick |
boolean, whether to enable file browse/select on clicking of the preview zone. Defaults to false | |
autoReplace |
boolean, whether to automatically replace the files in the preview after the maxFileCount limit is reached and a new set of file(s) is/are selected. This will only work if a valid maxFileCount is set. Defaults to false | |
autoOrientImage |
boolean, whether to automatically orient the image for display based on EXIF orientation tag (i.e. rotate or mirror flip horizontally/vertically). This property will affect only the image preview and is applicable only for JPEG images selected from client before upload. It does not alter the file sent to server. Thus, it will not be applicable for images shown in initialPreview. Defaults to true. Note that only jpeg files will be detected for auto orientation. You can see how this works in the auto image orientation demo. |
|
captionClass |
string, any additional CSS class to append to the caption container.
|
|
previewClass |
string, any additional CSS class to append to the preview container | |
mainClass |
string, any additional CSS class to append to the main plugin container that will render the caption and the browse, remove, and upload buttons. Defaults to file-caption-main | |
frameClass |
string, the CSS class to be additionally applied to each file thumbnail frame. Defaults to krajee-default | |
purifyHtml |
boolean, whether to purify HTML content displayed for HTML content type in preview. Defaults to true. This functionality will need the DomPurify plugin by cure53 to be loaded | |
fileSizeGetter |
布尔值, 根据字节参数生成人友好文件大小的回调。如果未设置, 将默认为以下回调: |
boolean, the callback to generate the human friendly filesize based on the bytes parameter. If not set this will default to the following callback 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];
}
|
initialPreview |
字符串 |数组中要显示的初始预览内容。您可以通过最小的 HTML 标记来显示您的图像、文本或文件。如果设置为字符串, 则如果没有分隔符, 则在初始预览中显示单个文件。可以设置分隔符 (在 initialDelimiter 中定义) 以在初始预览中显示多个文件。如果设置为数组, 它将将数组中的所有文件显示为初始预览 (对于多个文件上载方案很有用)。 根据插件样式主题, 将需要添加以下 CSS 类以显示每个文件类型:
图像文件: 包括 CSS 类文件-预览-图像
文本文件: 包括 CSS 类文件-预览-文本
其他文件: 包括 CSS 类文件-预览-其他
如何为初始预览设置各种文件的示例: |
string | array the initial preview content to be displayed. You can pass the minimal HTML markup for displaying your image, text, or file. If set as a string, this will display a single file in the initial preview if there is no delimiter. You can set a delimiter (as defined in initialDelimiter) to show multiple files in initial preview. If set as an array, it will display all files in the array as an initial preview (useful for multiple file upload scenarios). The following CSS classes will need to be added for displaying each file type as per the plugin style theme:
Examples of how you can setup various files for initial preview: // for image files initialPreview: [ "<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>", "<img src='/images/jellyfish.jpg' class='file-preview-image' alt='Jelly Fish' title='Jelly Fish'>", ], // for text files initialPreview: "<div class='file-preview-text' title='NOTES.txt'>" + "This is the sample text file content upto wrapTextLength of 250 characters" + "<span class='wrap-indicator' onclick='$(\"#show-detailed-text\").modal(\"show\")' title='NOTES.txt'>[…]</span>" + "</div>" // for other files initialPreview: "<div class='file-preview-text'>" + "<h2><i class='glyphicon glyphicon-file'></i></h2>" + "Filename.xlsx" + "</div>" |
initialPreviewCount |
int, 将添加到 "预览" 中选定的文件计数的初始预览项的计数。这在显示正确的标题时适用, whenoverwriteInitial 设置为 false。 | int, the count of initial preview items that will be added to the count of files selected in preview. This is applicable when displaying the right caption, whenoverwriteInitial is set to false.
|
initialPreviewDelimiter |
字符串, 用于将初始预览内容拆分为单个文件缩略图的分隔符 (仅适用于将 initialPreview 作为字符串而不是数组传递)。默认值为 * $。 | string, the delimiter to be used for splitting the initial preview content as individual file thumbnails (applicable only if initialPreview is passed as a string, instead of array). Defaults to *$$*.
|
initialPreviewAsData |
布尔值, 是否将初始预览内容集解析为数据而不是原始标记。默认为 false 以向后兼容 (在 v4.3.2 之前) | boolean, whether the initial preview content set is to be parsed as data instead of raw markup. Defaults to false for backward compatibility (prior to v4.3.2) |
initialPreviewFileType |
字符串, 在 previewSettings 中的键中配置的文件模板类型之一。这对于标识用于显示特定文件内容的模板很有用。默认为图像。 | string, one of the file template types as configured within the keys in previewSettings. This is useful to identify the template to be used to display the particular file's content. Defaults to image.
|
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, 如果前者没有设置。
|
array, the configuration for setting up important properties for each initialPreview item (that is setup as part of initialPreview). Each element in the array should be an object/associative array consisting of the following keys:
An example configuration of initialPreviewConfig (for the previously set initialPreviewContent) can be:
Note that initialPreview and initialPreviewConfig can also be setup in an easier way without rendering the entire markup but just passing the data. For this the initialPreviewAsData property must be set to true, and the preview will be rendered using the templates for the initial preview types. Within theinitialPreviewConfig, the type key will identify the preview file type for the data passed. For example, initial preview can be setup as a data in the following way:
NoteThe ajax delete action will send the following data to server via POST:
|
initialPreviewShowDelete |
bool, 是否将为使用 initialPreview 创建的每个缩略图显示 "删除" 按钮。 | bool, whether the delete button will be displayed for each thumbnail that has been created with initialPreview. |
removeFromPreviewOnError |
bool, 是否应从错误预览中删除文件缩略图。默认为 false。 | bool, whether the file thumbnail should be removed from preview on error. Defaults to false. |
previewThumbTags |
数组, 这将是缩略图模板中使用的标记列表, 在呈现缩略图时将在缩略图标记中动态替换。例如: |
array, this will be a list of tags used in thumbnail templates that will be replaced dynamically within the thumbnail markup, when the thumbnail is rendered. For example:
|
initialPreviewThumbTags |
数组, 这是特定于初始预览内容的 previewThumbTags 的扩展, 但将配置为与每个初始预览缩略图对应的对象数组。通过 initialPreview 设置的初始预览缩略图将读取此配置以替换标记。扩展示例:
|
array, this is an extension of previewThumbTags specifically for initial preview content - but will be configured as an array of objects corresponding to each initial preview thumbnail. The initial preview thumbnails set via initialPreview will read this configuration for replacing tags. Extending example above:
|
deleteExtraData |
对象 |函数将作为数据传递到初始预览删除 url/AJAX 服务器通过 POST 调用的额外数据。这将被 initialPreviewConfig [额外 '] 属性覆盖。此属性仅适用于初始预览中的 ajax 删除, 以及为 initialPreviewConfig ["url"] 或 deleteUrl 设置了值。 可以将其设置为对象 (键和值的关联数组) 或函数回调。作为一个对象, 可以将其设置为例如:
作为函数回调, 它可以设置为例如:
注意
ajax 删除操作将通过 POST 将以下数据发送到服务器:
密钥: 在 initialPreviewConfig 中设置为设置键 [' 键 ']
任何其他作为键传递的额外数据: 值对通过 initialPreviewConfig ["额外"] 或 deleteExtraData, 如果前者没有设置。
|
object | function the extra data that will be passed as data to the initial preview delete url/AJAX server call via POST. This will be overridden by theinitialPreviewConfig['extra'] property. This property is only applicable for ajax deletions in initial preview and when you have set a value forinitialPreviewConfig['url'] or deleteUrl. This can be setup either as an object (associative array of keys and values) or as a function callback. As an object, it can be set for example as:
As a function callback, it can be setup for example as:
NoteThe ajax delete action will send the following data to server via POST:
|
deleteUrl |
字符串, 用于在初始预览中通过 AJAX post 响应删除图像/内容的 URL。这将被 initialPreviewConfig [' url '] 属性覆盖。 |
string, the URL for deleting the image/content in the initial preview via AJAX post response. This will be overridden by the initialPreviewConfig['url']property. |
initialCaption |
字符串, 将显示初始预览标题文本。如果没有在此处设置值, 并且 initialPreview 设置为 true, 则默认为 "{预览-文件-计数} 文件", 其中 {预览文件计数} 是在 initialPreview 中传递的文件的计数。 |
string, the initial preview caption text to be displayed. If you do not set a value here and initialPreview is set to true this will default to "{preview-file-count} files selected", where {preview-file-count} is the count of the files passed in initialPreview. |
overwriteInitial |
布尔值, 无论您希望改写初始预览内容还是设置标题。这默认为 true, 即在上载新文件或清除文件时, 将覆盖任何 initialPreview 内容集。将其设置为 false 将有助于在数据库中显示保存的图像或文件, 特别是在使用多文件上载功能时尤其有用。 |
boolean, whether you wish to overwrite the initial preview content and caption setup. This defaults to true, whereby, any initialPreview content set will be overwritten, when new file is uploaded or when files are cleared. Setting it to false will help displaying a saved image or file from database always - useful especially when using the multiple file upload feature. |
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 属性。
|
object the templates configuration for rendering each part of the layout. You can set the following templates to control the widget layout:
The main1 and main2 templates would automatically parse the following tags for replacement:
The progress template would automatically parse the following tags for replacement:
The preview and caption templates can understand the following special tags which will be replaced:
The layoutTemplates if not set will default to:
The following templates will be used in rendering the main buttons for upload, remove, cancel, and browse.
The following tags will be parsed and auto replaced in the above button templates:
|
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 属性。
|
object the templates configuration for rendering each preview file type. The following file types are recognized:
The following tags will be parsed and replaced in each of the templates:
As noted, if you are coming from an earlier release (before v2.4.0), all preview templates have now been combined into one property, instead of separate templates for image, text etc.
The values of the constants used in the above templates are as follows:
where:
|
previewZoomSettings |
对象, 对显示在缩放模式预览中的内容的 HTML 属性的配置。配置类似于 previewSettings, 但是您可以在此属性中设置其他 HTML 属性, 使其超出宽度和高度。此属性将覆盖 previewSettings 中的配置。您可以设置 HTML 样式属性所支持的所有 CSS 样式属性。默认为每个文件类型的以下配置: |
object, the configuration of HTML attributes for the content displayed in the zoomed modal preview. The configuration is similar to previewSettings, however you can in this property set other HTML attributes beyond width and height. This property will override the configuration in previewSettings. You can set all CSS styling attributes as supported by HTML style attribute. Defaults to the following configuration for each file type:
|
previewZoomButtonIcons |
对象, 在详细预览中显示各种缩放控制按钮的图标。可以设置以下按钮:
上一个: 按钮在模式预览中导航到以前的文件内容
下一步: 按钮导航到模式预览中的下一个文件内容
toggleheader: 按钮切换显示和滑动/在模态头
全屏: 按钮切换放大预览到全屏显示
无国界: 按钮切换预览到一个无边框的最大化状态 (仅与全屏按钮的区别在于它不将浏览器设置为本机全屏模式)
关闭: 关闭模式缩放预览对话框的按钮
previewZoomButtonIcons 默认为以下配置:
|
object, the icons to be displayed for the various zoom control buttons in the detailed preview. The following buttons can be set:
The previewZoomButtonIcons defaults to the following configuration:
|
previewZoomButtonClasses |
对象, 要为详细预览中的缩放控件按钮设置的 CSS 类。可以设置以下按钮:
上一个: 按钮在模式预览中导航到以前的文件内容
下一步: 按钮导航到模式预览中的下一个文件内容
toggleheader: 按钮切换显示和滑动/在模态头
全屏: 按钮切换放大预览到全屏显示
无国界: 按钮切换预览到一个无边框的最大化状态 (仅与全屏按钮的区别在于它不将浏览器设置为本机全屏模式)
关闭: 关闭模式缩放预览对话框的按钮
previewZoomButtonClasses 默认为以下配置:
|
object, the CSS classes to be set for the zoom control buttons in the detailed preview. The following buttons can be set:
The previewZoomButtonClasses defaults to the following configuration:
|
preferIconicPreview |
布尔值, 是否使用 previewFileIconSettings andpreviewFileExtSettings 的配置强制预览区域中的文件缩略图的标志性预览。默认为 false。如果设置为 true, 它将尝试强制图标文件缩略图预览 (如果可能)。 | boolean, whether to force iconic preview of file thumbnails in the preview zone, by using the configuration for previewFileIconSettings andpreviewFileExtSettings. Defaults to false. If set to true, it will try to force an iconic file thumbnail preview if possible.
|
preferIconicZoomPreview |
布尔值, 是否在详细的缩放预览区域中强制使用 previewFileIconSettings 和 previewFileExtSettings 的配置对文件缩略图进行标志性预览。默认为 false。如果设置为 true, 它将尝试强制对详细的缩放内容进行标志性预览 (如果可能)。 | boolean, whether to force iconic preview of file thumbnails in the detailed zoom preview zone, by using the configuration for previewFileIconSettings and previewFileExtSettings. Defaults to false. If set to true, it will try to force an iconic preview for detailed zoom content if possible. |
previewZoomButtonTitles |
对象, 在详细预览中为缩放控件按钮设置的标题。可以设置以下按钮:
上一个: 按钮在模式预览中导航到以前的文件内容
下一步: 按钮导航到模式预览中的下一个文件内容
toggleheader: 按钮切换显示和滑动/在模态头
全屏: 按钮切换放大预览到全屏显示
无国界: 按钮切换预览到一个无边框的最大化状态 (仅与全屏按钮的区别在于它不将浏览器设置为本机全屏模式)
关闭: 关闭模式缩放预览对话框的按钮
previewZoomButtonClasses 默认为以下配置:
|
object, the titles to be set for the zoom control buttons in the detailed preview. The following buttons can be set:
The previewZoomButtonClasses defaults to the following configuration:
|
allowedFileTypes |
数组的允许文件类型的列表上载。默认设置为 null, 这意味着插件支持所有用于上载的文件类型。如果找到无效的文件类型, 则会引发 msgInvalidFileType 中设置的验证错误消息。fileTypeSettings 中设置的下列类型可用于安装。 | array the list of allowed file types for upload. This by default is set to null which means the plugin supports all file types for upload. If an invalid file type is found, then a validation error message as set in msgInvalidFileType will be raised. The following types as set in fileTypeSettings are available for setup. |
allowedFileExtensions |
数组允许上载的文件扩展名列表。默认设置为 null, 这意味着插件支持上载的所有文件扩展名。如果找到无效的文件扩展名, 则会引发 msgInvalidFileExtension 中设置的验证错误消息。此设置的一个示例可以是: 你需要小心, 以防你设置 allowedFileTypes 和 allowedFileExtensions。在这种情况下, allowedFileTypes 属性首先被验证, 并且通常在 allowedFileExtensions 设置之前 (并且后一种验证可能被跳过)。 |
array the list of allowed file extensions for upload. This by default is set to null which means the plugin supports all file extensions for upload. If an invalid file extension is found, then a validation error message as set in msgInvalidFileExtension will be raised. An example of setting this could be:
Note:You need to be careful in case you are setting both allowedFileTypes and allowedFileExtensions. In this case, the allowedFileTypes property is validated first and generally precedes the allowedFileExtensions setting (and the latter validation maybe skipped).
|
allowedPreviewTypes |
数组的小部件的允许预览类型列表。默认情况下, 此选项支持预览的所有文件类型。默认情况下, 插件将每个文件视为一个对象, 如果它与以前的任何类型都不匹配。若要禁用此行为, 可以从 allowedPreviewTypes 列表中移除对象, 或通过 allowedPreviewMimeTypes 对其进行微调. 若要禁用所有文件类型的内容预览并将 previewIcon 显示为缩略图, 请将其设置为 null、空或 false。 默认设置如下:
|
array the list of allowed preview types for your widget. This by default supports all file types for preview. The plugin by default treats each file as an object if it does not match any of the previous types. To disable this behavior, you can remove object from the list of allowedPreviewTypes OR fine tune it through allowedPreviewMimeTypes.To disable content preview for all file-types and show the previewIcon instead as a thumbnail, set this to null, empty, or false. This is by default setup as following:
|
allowedPreviewMimeTypes |
阵列允许预览的 mime 类型列表。默认情况下, 此设置为 null, 这意味着允许所有可能的 mime 类型。此设置与 allowedPreviewTypes 结合使用, 仅筛选允许预览的所需文件类型。如果需要, 您可以检查此列表中允许的 mime 类型。 | array the list of allowed mime types for preview. This is set to null by default which means all possible mime types are allowed. This setting works in combination with allowedPreviewTypes to filter only the needed file types allowed for preview. You can check this list of allowed mime types to add to this list if needed. |
defaultPreviewContent |
字符串, 则在清除文件或清除输入时, 默认情况下在预览窗口中显示的默认内容/标记。这对于在上载到覆盖之前显示默认用户配置文件图片或配置文件图像的用例非常有用。这与 initialPreview 在意义上有点不同, initialPreview 内容将始终显示, 除非它是根据 overwriteInitial 删除或覆盖。另一方面, defaultPreviewContent 只会在初始化或清除预览时显示。在其他时间, 当文件被选中时, 这将被暂时覆盖, 直到选定的文件被清除。 此属性可用于在预览窗口中显示默认用户配置文件图片 (或保存的图片), 除非用户选择图片。查看头像上传演示示例详细信息 |
string, the default content / markup to show by default in the preview window whenever the files are cleared or the input is cleared. This can be useful for use cases like showing the default user profile picture or profile image before upload to overwrite. This is a bit different from initialPreview in the sense, that the initialPreview content will always be displayed unless it is deleted or overwritten based on overwriteInitial. The defaultPreviewContent on the other hand will only be shown ONLY on initialization OR whenever you clear the preview. At other times when files have been selected this will be overwritten temporarily until file(s) selected is/are cleared. This property can be useful to display for example a default user profile picture (or saved picture) in the preview window unless the user selects a picture. Check the avatar upload demo example for details |
customLayoutTags |
对象将在布局模板中替换的其他自定义标记的列表。这应该是键的关联数组对象: 值对, 其中:
键: 字符串, 是要替换的标记, 建议将其括在大括号中。
值: 字符串 | 函数, 是将替换上面的标记键的值。可以将其设置为字符串或回调函数。
|
object the list of additional custom tags that will be replaced in the layout templates. This should be an associative array object of key: value pairs, where:
|
customPreviewTags |
对象将在预览模板中替换的其他自定义标记的列表。这应该是键的关联数组对象: 值对, 其中: 键: 字符串, 是要替换的标记, 建议将其括在大括号中。
值: 字符串 | 函数, 是将替换上面的标记键的值。可以将其设置为字符串或回调函数。
|
object the list of additional custom tags that will be replaced in the preview templates. This should be an associative array object of key: value pairs, where:
|
previewSettings |
对象用于呈现每个预览文件类型的格式设置 (宽度和高度)。默认设置如下: |
object the format settings (width and height) for rendering each preview file type. This is by default setup as following:
|
fileTypeSettings |
对象设置, 以便在选择要上载的文件时验证和标识每个文件类型。这是一个回调列表, 它接受文件 mime 类型和文件名作为参数。默认设置如下: |
object the settings to validate and identify each file type when a file is selected for upload. This is a list of callbacks, which accepts the file mime type and file name as a parameter. This is by default setup as following:
|
previewFileIcon |
字符串, 当检测到不可读的预览文件类型时, 将在每个预览文件缩略图中显示的图标。默认为 <i class="glyphicon glyphicon-file"> </i> 。 | string, the icon to be shown in each preview file thumbnail when an unreadable file type for preview is detected. Defaults to <i class="glyphicon glyphicon-file"></i> .
|
previewFileIconClass |
字符串, 将应用于预览文件图标容器的 CSS 类。默认为文件-其他图标。 | string, the CSS class to be applied to the preview file icon container. Defaults to file-other-icon.
|
previewFileIconSettings |
对象每个文件扩展名 (类型) 的预览图标标记设置。您需要将其设置为 key: 值对, 其中密钥对应于文件扩展名 (如 doc、docx、xls 等), 并且该值对应于要呈现的图标的标记。如果未设置此值, 或者此处未设置文件扩展名, 则预览将默认为 previewFileIcon。请注意, 显示图标而不是文件内容是通过 allowedPreviewTypes 和 allowedPreviewMimeTypes 控制的 您可以设置 previewFileIconSettings, 如下所示: |
object the preview icon markup settings for each file extension (type). You need to set this as key: value pairs, where the key corresponds to a file extension (e.g. doc, docx, xls etc.), and the value corresponds to the markup of the icon to be rendered. If this is not set OR a file extension is not set here, the preview will default to previewFileIcon. Note that displaying the icons instead of file content is controlled via allowedPreviewTypes andallowedPreviewMimeTypes You can setup previewFileIconSettings as shown below:
|
previewFileExtSettings |
object the extensions to be auto derived for each file extension (type). This is useful if you want to set the same icon for multiple file extension types. You need to set this as `key: value` pairs, where the key corresponds to a file extension as set in previewFileIconSettings (e.g. doc, docx, xls etc.). Thevalue will be a function callback that accepts the following parameter:
You can configure the callback to match the set of file extensions (via regex or similar) for each `key` and return a boolean output if the file extension matches. For example, you can setup `previewFileExtSettings` as shown below:
|
|
buttonLabelClass |
string, the CSS class for the each of the button labels for browse, remove, upload, and cancel. Defaults to hidden-xs, which automatically hides the button labels for small screen devices and renders as smaller iconic buttons to fit to the screen.
|
|
browseLabel |
string, the label to display for the file picker/browse button. Defaults to Browse ….
|
|
browseIcon |
string, the icon to display before the label for the file picker/browse button. Defaults to <i class="glyphicon glyphicon-folder-open"></i> .
|
|
browseClass |
string, the CSS class for the file picker/browse button. Defaults to btn btn-primary.
|
|
removeLabel |
string, the label to display for the file remove button. Defaults to Remove.
|
|
removeIcon |
string, the icon to display before the label for the file picker/remove button. Defaults to <i class="glyphicon glyphicon-trash"></i> .
|
|
removeClass |
string, the CSS class for the file remove button. Defaults to btn btn-default | |
removeTitle |
string, the title to display on hover for the file remove button. Defaults to Clear selected files | |
uploadLabel |
string, the label to display for the file upload button. Defaults to Upload | |
uploadIcon |
string, the icon to display before the label for the file upload button. Defaults to <i class="glyphicon glyphicon-upload"></i> | |
uploadClass |
string, the CSS class for the file upload button. Defaults to btn btn-default. | |
uploadTitle |
string, the title to display on hover for the file remove button. Defaults to Upload selected files. | |
uploadUrl |
string, the URL for the upload processing action (typically for ajax based processing). Defaults to null. If this is not set or null, then the upload button action will default to form submission. NOTE: This is MANDATORY if you want to use advanced features like drag & drop, append/remove files, selectively upload files via ajax etc. The plugin automatically send $_FILES data to the server with the input `name` attribute as the key if provided. If input name is not set, the key defaults to file-data.
|
|
uploadAsync |
bool whether the batch upload of multiple files will be asynchronous/in parallel. Defaults to true. | |
uploadExtraData |
object | function, the extra data that will be passed as data to the url/AJAX server call via POST. This property is only applicable for ajax uploads and when you have set a value for uploadUrl. This can be setup either as an object (associative array of keys and values) or as a function callback. As an object, it can be set for example as:
As a function callback, the uploadExtraData can be setup as shown below. Note that for uploading individual file via thumbnail, the callback can also receive the thumbnail previewId and index as parameters. These are described below:
|
|
zoomModalHeight |
int, the default height in px for the modal window displaying the zoomed preview content. Defaults to 480.
|
|
minImageHeight |
int, the minimum allowed image height in px if you are uploading image files. Defaults to null which means no limit on image height | |
maxImageHeight |
int, the maximum allowed image height in px if you are uploading image files. Defaults to null which means no limit on image height. Note that if you setresizeImage property to true, then the entire image will be resized within this height (depending on resizePreference) | |
minImageWidth |
int, the minimum allowed image width in px if you are uploading image files. Defaults to null which means no limit on image width | |
maxImageWidth |
int, the maximum allowed image width in px if you are uploading image files. Defaults to null which means no limit on image width. Note that if you setresizeImage property to true, then the entire image will be resized within this width (depending on resizePreference). |
|
resizeImage |
bool, whether to add ability to resize uploaded images. Defaults to false. Note that resizing images requires HTML5 canvas support which is supported on most modern browsers. In addition, you must include Piexifjs plugin by hMatoba by including plugins/piexif.min.js in your application. It is required to be loaded before fileinput.min.js for restoring the exif data to the image files when using the image resize feature of the bootstrap-fileinput plugin. |
|
resizePreference |
string, preference to resize the image based on width or height. Defaults to width. This property is parsed only when resizeImage is true. If set towidth, the maxImageWidth property is first tested and if image size is greater than this, then the image is resized to maxImageWidth. The image height is resized and adjusted in the same ratio as width. In case, the image width is already less than maxImageWidth then the maxImageHeight property is used to resize and width is adjusted in same ratio. This will behave conversely, when resizePreference is set to height - the maxImageHeight will be first tested against image height and then the rest of steps will be similarly parsed with preference given to height instead of width as before. For example: |
|
