File Input Features

文件输入功能
1、该插件将将一个简单的 HTML 文件输入转换为高级文件选取器控件。将有助于对不支持 JQuery 或 Javascript 的浏览器的正常 HTML 文件输入进行回退。
2、文件输入由以下三部分组成, 其中包含用于控制显示的选项和模板:
文件标题部分: 显示所选文件的简短信息
"文件操作按钮" 部分: 浏览、删除和上载文件。
文件预览部分: 在客户端上显示选定的文件以进行预览 (支持预览图像、文本、flash 和视频文件类型)。其他文件类型将显示为普通缩略图。
3、如果您设置其type = file, 则该插件会自动将带有class = file的输入转换为高级文件选择器输入。输入的所有选项都可以作为 HTML5 data 属性传递。
4、能够选择和预览多个文件。使用 HTML 5 文件读取器 API 来读取和预览文件。显示正在加载到预览区域的文件的进度, 以防选择了许多文件。
5、提供预定义的模板和 CSS 类, 可以根据需要更改文件输入显示样式。
6、能够配置插件, 以显示初始预览的图像/文件的初始标题 (更有用的记录更新方案)。有关配置, 请参阅 "插件选项" 部分中的 initialPreview、initialPreviewConfig 和 initialCaption 属性。
7、能够将内容缩放为详细的预览。在预览中查看缩放内容的幻灯片显示, 最大化到无边框或全屏预览。
8、通过拖放在初始预览中对内容进行排序/重新排列的能力。
9、能够完全主题的小部件和控制样式和布局。
10、通过区域设置/翻译支持同一页面上的多个语言部件。
11、选项以显示/隐藏下列任意或全部内容:
标题节
预览部分
上传按钮
删除按钮
12、自定义目标容器元素的位置, 以显示整个插件、标题容器、标题文本、预览容器、预览图像和预览状态。
13、对于文本文件预览, 将文本 autowrap 到缩略图宽度, 并显示一个环绕标记链接以在悬停时显示完整文本。您可以自定义自动换行指示器 (默认为...)。
14、为所选的预览、进度和文件自定义邮件。
15、上载操作默认为表单提交。支持自定义基于 ajax 的上载的上载路由/服务器操作参数。
16、为高级开发触发 JQuery 事件。当前可用的事件有 filereset、fileclear、filecleared、fileloaded 和 fileerror。
17、禁用和只读文件输入支持。
18、动态自动调整长文件名超过容器宽度的文件标题。
19、引发在预览容器上完全加载映像后触发的新 fileimageuploaded 事件。
20、自动预览图像超出预览容器的大小。
21完全模板和可扩展的, 以允许配置的文件输入的方式, 开发者想要的。
22根据各种文件预览类型预览智能。内置文件支持类型分为图像、文本、html、视频、音频、flash、对象等。
23allowedPreviewTypes: 现在您可以配置允许将哪些文件类型显示为预览。默认为 "图像"、"html"、"文本"、"视频"、"音频"、"flash"、"对象"。因此, 默认情况下, 所有文件类型都被视为要预览的对象。对于示例预览图像和视频, 可以将其设置为 ["图像"、"视频"]。要禁用所有文件类型的内容预览并将 previewIcon 显示为缩略图, 请将其设置为 null、空或 false。
24、allowedPreviewMimeTypes: 除了 allowedPreviewTypes, 您还可以控制哪些 mime 类型可以显示为预览。此值默认为 null, 这意味着支持所有 mime 类型。>> 注意: 随着释放 2.5.0, 您现在可以控制哪些文件类型或扩展允许上传通过设置 allowedFileTypes 和 allowedFileExtensions。
25、layoutTemplates: 允许您在一个属性中配置所有布局模板设置。可以配置的布局对象有: main1、main2、预览、标题和模式。
26、previewTemplates: 每个预览类型的所有预览模板都已合并到一个属性中, 而不是图像、文本等单独的模板。键是在 allowedPreviewTypes 中设置的格式, 值是用于预览的模板。每个预览文件类型 (一般、图像、文本、html、视频、音频、flash、对象和其他) 都有默认的预建模板。通用模板仅用于使用直接标记显示 initialPreview 内容。
27、previewSettings: 允许您为每个预览图像类型配置宽度和高度。该插件具有默认的宽度和高度预定义的每一个类型的图像, 文本, html, 视频, 音频, flash 和对象。
28、fileTypeSettings: 允许您使用回调配置和标识每个预览文件类型。t
 
29、已增强了在模板中替换标记的功能。使用此版本, 它将自动检查每个标记在模板字符串中是否有多个匹配项。
30、通过返回输出在任何其他事件中中止上载, 可以轻松地操作事件并添加自己的自定义验证消息。

31、支持翻译和区域设置。

 flash 预览将需要客户端浏览器安装和支持冲击波闪存。flash 预览当前仅在 webkit 浏览器中成功工作。然而, 支持 HTML5 视频/音频标签的所有现代浏览器都支持视频和音频格式。请注意, 浏览器的视频/音频格式受 HTML5 视频元素支持的数量有限 (如 mp4、webm、ogg、mp3、wav)。建议将视频文件的大小设置为小 (通过 maxFileSize 属性进行控制), 以使其不影响预览性能。你可以从这个插件的例子目录中复制一些文件, 来测试一些 flash 和视频文件的例子。
文件上传功能
随着发布 4.0.0, 该插件现在还包括内置支持 AJAX 上传和有选择地添加或删除文件。AJAX 上传功能是建立在 HTML5 FormData 和 XMLHttpRequest 级别2标准之上的。大多数现代浏览器确实支持此标准, 但插件会自动降级为不支持的浏览器的正常表单提交。
使用 HTML5 FormData 为基于 AJAX 的上传添加功能 (大多数现代浏览器支持它)。如果不支持, 将降级为基于表单的文件提交。
要使用 AJAX 上传, 你必须设置 uploadUrl 属性。
增强插件现在允许文件添加, 追加, 删除 (根据来自许多人的反馈)。因而你可能追加文件到预览。
新的拖放区域可在预览中拖放文件并追加。
一个一个地或成批地删除或上载文件。
如果 showPreview 设置为 false, 或 uploadUrl 不支持插件将降级到正常形式的基于上传。
可配置的指示文件等待上传, 文件成功上传, 文件错误上传。
能够添加额外的表单数据与基于 ajax 的上传。
上传进度条和个人缩略图上传指标。
能够取消和中止正在进行的 AJAX 上传。
建立初始预览内容 (如保存的图片库)。您可以设置初始预览操作 (初始预览删除的预生成支持)。还可以为初始预览缩略图设置其他自定义操作按钮。
确保插件仍然是精干的大小和优化的性能尽管以上的功能, 通过最佳地利用 HTML5 和 jquery 的功能。
一旦 ajax 上载完成, 就会自动从服务器中刷新内容预览。

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") 中设置。

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

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

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

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:

  • Load respective theme JS file(s) that you need (e.g. themes/fa/fa.js for Font Awesome theme). The theme file(s) must be loaded after thefileinput.js.

  • Set the theme property in the plugin to the theme you need and which you have setup in your theme configuration JS file above (e.g. 'fa').

  • The plugin will automatically read the theme configuration for the theme name from $fileinputThemes['<theme-name>'] from the JS file (e.g. via$fileinputThemes['<theme-name>']).

  • The plugin will automatically also prepend the CSS selector theme-<theme-name> to the file input container, so that you can override your styles. The CSS for such themes can be submitted by community in themes/THEME_NAME folder of the repo.

  • You can additionally load any theme specific CSS files if needed.

 
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:

  • image files: Include CSS class file-preview-image
  • text files: Include CSS class file-preview-text
  • other files: Include CSS class file-preview-other

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。

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

请注意, 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:

  • type: string, one of the file template types as configured within the keys in previewSettings. This will override the initialPreviewFileType setting. This is useful to identify the template to be used to display the particular file's content.

  • filetype: string, file mime type to identify the content. Useful for certain file templates like audio or video (e.g. video/mp4).

  • size: float, the size of the file in BYTES which will be displayed using the size layout template. If not set or if it cannot be parsed as a float number, then a blank string will be displayed.

  • previewAsData: boolean, whether to parse this preview content as a data input instead of a raw markup source. This will override theinitialPreviewAsData setting.

  • caption: string, the caption or filename to display for each initial preview item content.

  • width: string, the CSS width of the image/content displayed.

  • url: string, the URL for deleting the image/content in the initial preview via AJAX post response. This will default to deleteUrl if not set.

  • key: string | object, the key that will be passed as data to the url via AJAX POST.

  • frameClass: string, the additional frame css class to set for the file's thumbnail frame.

  • frameAttr: object, the HTML attribute settings (set as key:value pairs) for the thumbnail frame.

  • extra: object | function, the extra data that will be passed as data to the initial preview delete url/AJAX server call via POST. This will default todeleteExtraData if not set.

An example configuration of initialPreviewConfig (for the previously set initialPreviewContent) can be:

  1. // setup initial preview with data keys
  2. initialPreview: [
  3. "<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>",
  4. "<img src='/images/jellyfish.jpg' class='file-preview-image' alt='Jelly Fish' title='Jelly Fish'>",
  5. ],
  6. // initial preview configuration
  7. initialPreviewConfig: [
  8. {
  9. caption: 'desert.jpg',
  10. width: '120px',
  11. url: '/localhost/avatar/delete',
  12. key: 100,
  13. extra: {id: 100}
  14. },
  15. {
  16. caption: 'jellyfish.jpg',
  17. width: '120px',
  18. url: '/localhost/avatar/delete',
  19. key: 101,
  20. frameClass: 'my-custom-frame-css',
  21. frameAttr: {
  22. style: 'height:80px',
  23. title: 'My Custom Title',
  24. },
  25. extra: function() {
  26. return {id: $("#id").val()};
  27. },
  28. }
  29. ]

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:

  1. initialPreview: [
  2. // IMAGE DATA
  3. 'http://lorempixel.com/800/460/business/1',
  4. // IMAGE RAW MARKUP
  5. '<img src="http://lorempixel.com/800/460/business/2" class="kv-preview-data file-preview-image" style="height:160px">',
  6. // TEXT DATA
  7. "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut mauris ut libero fermentum feugiat eu et dui. Mauris condimentum rhoncus enim, sed semper neque vestibulum id. Nulla semper, turpis ut consequat imperdiet, enim turpis aliquet orci, eget venenatis elit sapien non ante. Aliquam neque ipsum, rhoncus id ipsum et, volutpat tincidunt augue. Maecenas dolor libero, gravida nec est at, commodo tempor massa. Sed id feugiat massa. Pellentesque at est eu ante aliquam viverra ac sed est.",
  8. // PDF DATA
  9. 'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/pdf-sample.pdf',
  10. // VIDEO DATA
  11. "http://kartik-v.github.io/bootstrap-fileinput-samples/samples/small.mp4",
  12. ],
  13. initialPreviewAsData: true, // defaults markup
  14. initialPreviewConfig: [
  15. {caption: "Business 1.jpg", size: 762980, url: "$urlD", key: 11},
  16. {previewAsData: false, size: 823782, caption: "Business 2.jpg", url: "$urlD", key: 13},
  17. {caption: "Lorem Ipsum.txt", type: "text", size: 1430, url: "$urlD", key: 12},
  18. {type: "pdf", size: 8000, caption: "PDF Sample.pdf", url: "$urlD", key: 14},
  19. {type: "video", size: 375000, filetype: "video/mp4", caption: "Krajee Sample.mp4", url: "$urlD", key: 15},
  20. ],

Note

The ajax delete action will send the following data to server via POST:

  • key: the key setting as setup in initialPreviewConfig['key']

  • extra: the extra data passed either via initialPreviewConfig['extra'] OR deleteExtraData if former is not set.

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:

  1. // change thumbnail footer template
  2. layoutTemplates.footer = '<div class="file-thumbnail-footer">\n' +
  3. ' <div class="file-caption-name">{caption}{size}</div>\n' +
  4. ' {CUSTOM_TAG_NEW}\n' +
  5. ' {CUSTOM_TAG_INIT}\n' +
  6. ' {actions}\n' +
  7. '</div>';
  8. // set preview template tags
  9. previewThumbTags = {
  10. '{CUSTOM_TAG_NEW}': '<span class="custom-css">CUSTOM MARKUP</span>',
  11. '{CUSTOM_TAG_INIT}': ' '
  12. };

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:

  1. // change thumbnail footer template
  2. layoutTemplates.footer = '<div class="file-thumbnail-footer">\n' +
  3. ' <div class="file-caption-name">{caption}{size}</div>\n' +
  4. ' {CUSTOM_TAG_NEW}\n' +
  5. ' {CUSTOM_TAG_INIT}\n' +
  6. ' {actions}\n' +
  7. '</div>';
  8. // setup initial preview with data keys
  9. initialPreview: [
  10. "<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>",
  11. "<img src='/images/jellyfish.jpg' class='file-preview-image' alt='Jelly Fish' title='Jelly Fish'>",
  12. ],
  13. // set initial preview template tags
  14. initialPreviewThumbTags = {
  15. '{CUSTOM_TAG_NEW}': ' ',
  16. '{CUSTOM_TAG_INIT}': '<span class="custom-css">CUSTOM MARKUP</span>'
  17. };

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:

  1. {id: 100, value: '100 Details'}

As a function callback, it can be setup for example as:

  1. function() {
  2. var obj = {};
  3. $('.your-form-class').find('input').each(function() {
  4. var id = $(this).attr('id'), val = $(this).val();
  5. obj[id] = val;
  6. });
  7. return obj;
  8. }

Note

The ajax delete action will send the following data to server via POST:

  • key: the key setting as setup in initialPreviewConfig['key']

  • any other extra data passed as key: value pairs either via initialPreviewConfig['extra'] OR deleteExtraData if former is not set.
 
      
 
      

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:

  • main1: the template for rendering the widget with caption.

  • main2: the template for rendering the widget without caption.

  • preview: the template for rendering the preview.

  • fileIcon: the icon to render before the caption text.

  • size: the template to display the file size in the thumbnails. The tag {sizeText} should be used to render the size data.

  • caption: the template for rendering the caption.

  • modal: the template for rendering the modal (for file content preview zooming).

  • progress: the template for the progress bar when upload is in progress (for batch/mass uploads and within each preview thumbnail for async/single uploads). The upload progress bar when displayed within each thumbnail will be wrapped inside a container having a CSS class of `file-thumb-progress`. The following tags will be parsed and replaced automatically:

    • {percent}: will be replaced with the upload progress percentage.

  • footer: the template for the footer section of each file preview thumbnail. The following tags will be parsed and replaced automatically:

    • {actions}: will be replaced with the output of the actions template.

  • actions: the template for the file action buttons to be displayed within the thumbnail footer. The following tags will be parsed and replaced automatically:

    • {upload}: will be replaced with the output of the actionUpload template.

    • {delete}: will be replaced with the output of the actionDelete template.

  • actionDelete: the template for the file delete action button within the thumbnail footer. The following tags will be parsed and replaced automatically:

    • {removeClass}: the css class for the remove button. Will be replaced with the removeClass set within fileActionSettings.

    • {removeIcon}: the icon for the remove button. Will be replaced with the removeIcon set within fileActionSettings.

    • {removeTitle}: the title to display on hover for the remove button. Will be replaced with the removeTitle set within fileActionSettings.

    • {dataUrl}: the URL for deleting the file thumbnail for initialPreview content only. Will be replaced with the url set withininitialPreviewConfig.

    • {dataKey}: the key (additional data) that will be passed to the URL above via POST to the AJAX call. Will be replaced with the key set withininitialPreviewConfig.

  • actionUpload: the template for the file upload action button within the thumbnail footer.

    • {uploadClass}: the css class for the upload button. Will be replaced with the uploadClass set within fileActionSettings.

    • {uploadIcon}: the icon for the upload button. Will be replaced with the uploadIcon set within fileActionSettings.

    • {uploadTitle}: the title to display on hover for the upload button. Will be replaced with the uploadTitle set within fileActionSettings.

The main1 and main2 templates would automatically parse the following tags for replacement:

  • {class}: the CSS class as set in the mainClass property.

  • {close}: will be replaced with the close (cross) icon (by default on top right of the preview window). The layout template to control this markup islayoutTemplates.close.

  • {preview}: the content parsed by the previewTemplate and will be displayed only if showPreview is true.

  • {caption}: the content parsed by the captionTemplate and will be displayed only if showCaption is true.

  • {size}: the content parsed by the layoutTemplates.size.

  • {remove}: the file remove/clear button and will be displayed only if showRemove is true.

  • {upload}: the file upload button and will be displayed only if showUpload is true.

  • {cancel}: the file upload cancel button that will be displayed when AJAX upload is in process to abort the AJAX upload.

  • {browse}: the main file browse button to select your files for input.

The progress template would automatically parse the following tags for replacement:

  • {class}: the CSS class as set in the progressClass or progressCompleteClass property (depending on the progress percentage).

The preview and caption templates can understand the following special tags which will be replaced:

  • {class}: the CSS class as set in the mainClass, captionClass or previewClass properties.

The layoutTemplates if not set will default to:

  1. {
  2. main1: '{preview}\n' +
  3. '<div class="kv-upload-progress hide"></div>\n' +
  4. '<div class="input-group {class}">\n' +
  5. ' {caption}\n' +
  6. ' <div class="input-group-btn">\n' +
  7. ' {remove}\n' +
  8. ' {cancel}\n' +
  9. ' {upload}\n' +
  10. ' {browse}\n' +
  11. ' </div>\n' +
  12. '</div>',
  13. main2: '{preview}\n<div class="kv-upload-progress hide">
    </div>\n{remove}\n{cancel}\n{upload}\n{browse}\n',
  14. preview: '<div class="file-preview {class}">\n' +
  15. ' {close}\n' +
  16. ' <div class="close fileinput-remove">×</div>\n' +
  17. ' <div class="{dropClass}">\n' +
  18. ' <div class="file-preview-thumbnails">\n' +
  19. ' </div>\n' +
  20. ' <div class="clearfix"></div>' +
  21. ' <div class="file-preview-status text-center text-success"></div>\n' +
  22. ' <div class="kv-fileinput-error"></div>\n' +
  23. ' </div>\n' +
  24. '</div>',
  25. icon: '<span class="glyphicon glyphicon-file kv-caption-icon"></span>',
  26. caption: '<div tabindex="-1" class="form-control file-caption {class}">\n' +
  27. ' <div class="file-caption-name"></div>\n' +
  28. '</div>',
  29. btnDefault: '<button type="{type}" tabindex="500" title="{title}"
    class="{css}"{status}>{icon}{label}</button>',
  30. btnLink: '<a href="{href}" tabindex="500" title="{title}"
    class="{css}"{status}>{icon}{label}</a>',
  31. btnBrowse: '<div tabindex="500" class="{css}"{status}>{icon}{label}</div>',
  32. modalMain: '<div id="kvFileinputModal" class="file-zoom-dialog modal fade"
    tabindex="-1" aria-labelledby="kvFileinputModalLabel"></div>',
  33. modal: '<div class="modal-dialog modal-lg{rtl}" role="document">\n' +
  34. ' <div class="modal-content">\n' +
  35. ' <div class="modal-header">\n' +
  36. ' <div class="kv-zoom-actions pull-right">{toggleheader}
    {fullscreen}{borderless}{close}</div>\n' +
  37. ' <h3 class="modal-title">{heading} <small>
    <span class="kv-zoom-title"></span></small></h3>\n' +
  38. ' </div>\n' +
  39. ' <div class="modal-body">\n' +
  40. ' <div class="floating-buttons"></div>\n' +
  41. ' <div class="kv-zoom-body file-zoom-content"></div>\n' + '{prev} {next}\n' +
  42. ' </div>\n' +
  43. ' </div>\n' +
  44. '</div>\n',
  45. progress: '<div class="progress">\n' +
  46. ' <div class="progress-bar progress-bar-success
    progress-bar-striped text-center" role="progressbar" aria-valuenow="{percent}"
    aria-valuemin="0" aria-valuemax="100" style="width:{percent}%;">\n' +
  47. ' {status}\n' +
  48. ' </div>\n' +
  49. '</div>',
  50. footer: '<div class="file-thumbnail-footer">\n' +
  51. ' <div class="file-caption-name" style="width:{width}">{caption}</div>\n' +
  52. ' {progress} {actions}\n' +
  53. '</div>',
  54. actions: '<div class="file-actions">\n' +
  55. ' <div class="file-footer-buttons">\n' +
  56. ' {upload} {delete} {zoom} {other}' +
  57. ' </div>\n' +
  58. ' {drag}\n' +
  59. ' <div class="file-upload-indicator"
    title="{indicatorTitle}">{indicator}</div>\n' +
  60. ' <div class="clearfix"></div>\n' +
  61. '</div>',
  62. actionDelete: '<button type="button" class="kv-file-remove {removeClass}"
    title="{removeTitle}"{dataUrl}{dataKey}>{removeIcon}</button>\n',
  63. actionUpload: '<button type="button" class="kv-file-upload {uploadClass}"
    title="{uploadTitle}">{uploadIcon}</button>\n',
  64. actionZoom: '<button type="button" class="kv-file-zoom {zoomClass}"
    title="{zoomTitle}">{zoomIcon}</button>',
  65. actionDrag: '<span class="file-drag-handle {dragClass}"
    title="{dragTitle}">{dragIcon}</span>';
  66. }

The following templates will be used in rendering the main buttons for upload, remove, cancel, and browse.

  • btnDefault: The template for upload, remove, and cancel buttons.

  • btnLink: The template for upload button when used with ajax (i.e. when uploadUrl is set).

  • btnBrowse: The template for the browse button.

The following tags will be parsed and auto replaced in the above button templates:

  • {type}: the HTML button type, defaults to button for most buttons and submit for form based uploads.

  • {title}: the title to display on button hover.

  • {css}: the CSS class for the button. This is derived from settings for uploadClass or removeClass or cancelClass or browseClass.

  • {status}: the disabled status for the button if available (else will be blank).

  • {icon}: the button icon as identified by uploadIcon or removeIcon or cancelIcon or browseIcon.

  • {label}: the button label as identified by uploadLabel or removeLabel or cancelLabel or browseLabel.

  • {href}: applicable only for Upload button for ajax uploads and will be replaced with the uploadUrl property.

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:

  • image: the preview template for image files.

  • text: the preview template for text files.

  • html: the preview template for html files.

  • video: the preview template for video files (supported by HTML 5 video tag).

  • audio: the preview template for audio files (supported by HTML 5 audio tag).

  • flash: the preview template for flash files (supported currently on webkit browsers).

  • object: the preview template for all other files - by default treated as object. To disable this behavior, configure the allowedPreviewTypes property.

  • generic: this template is used ONLY for rendering the initialPreview markup content passed directly as a raw format.

The following tags will be parsed and replaced in each of the templates:

  • {rtl}: will be set to kv-rtl css class when rtl is set to true, else will be a empty string.

  • {previewId}: will be replaced with the generated identifier for the preview frame container.

  • {template}: will be replaced with the file template type (e.g. image, text etc.)

  • {data}: will be replaced with the data source for each preview type.

  • {width}: will be replaced with the width for the file type as set in previewSettings.

  • {height}: will be replaced with the height for the file type as set in previewSettings.

  • {caption}: will be replaced with the file name.

  • {type}: will be replaced with the file type.

  • {content}: this is applicable only for the generic template. It will be replaced with the raw HTML markup as set in initialPreview. None of the above tags will be parsed for the generic template.

  • {dialog}: currently applicable only for text file previews. Will be replaced with the JS code to launch the modal dialog.

  • {zoomTitle}: currently applicable only for text file previews. This will be replaced with the msgZoomTitle property. This is the title that is displayed on hover of the zoom button (which on clicking will display the text file).

  • {zoomInd}: currently applicable only for text file previews. This will be replaced with the zoomIndicator property. This is the title that is displayed on hover of the zoom button (which on clicking will display the text file).
  • {heading}: currently applicable only for text file previews. This represents the modal dialog heading title. This will be replaced with themsgZoomModalHeading property.

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.

  1. {
  2. generic: '<div class="file-preview-frame" id="{previewId}"
    data-fileindex="{fileindex}" data-template="{template}">\n' +
  3. ' {content}\n' +
  4. ' {footer}\n' +
  5. '</div>\n',
  6. image: '<div class="file-preview-frame" id="{previewId}"
    data-fileindex="{fileindex}" data-template="{template}">\n' +
  7. ' <div class="kv-file-content">' +
  8. ' <img src="{data}"
    class="kv-preview-data file-preview-image" title="{caption}"
    alt="{caption}" ' + STYLE_SETTING + '>\n' +
  9. ' </div>\n' +
  10. ' {footer}\n' +
  11. '</div>\n',
  12. text: '<div class="file-preview-frame{frameClass}"
    id="{previewId}" data-fileindex="{fileindex}"
    data-template="{template}">\n' +
  13. ' <div class="kv-file-content">' +
  14. ' <textarea class="kv-preview-data file-preview-text"
    title="{caption}" readonly '
  15. + STYLE_SETTING + '>{data}</textarea>',
  16. ' </div>\n' +
  17. ' {footer}\n' +
  18. '</div>',
  19. html: '<div class="file-preview-frame" id="{previewId}"
    data-fileindex="{fileindex}" data-template="{template}">\n' +
  20. ' <div class="kv-file-content">' +
  21. ' <div class="kv-preview-data file-preview-html"
    title="{caption}" ' + STYLE_SETTING + '>{data}</div>\n' +
  22. ' </div>\n' +
  23. ' {footer}\n' +
  24. '</div>',
  25. pdf: '<div class="file-preview-frame{frameClass}"
    id="{previewId}" data-fileindex="{fileindex}"
    data-template="{template}">\n' +
  26. ' <div class="kv-file-content">' +
  27. ' <embed class="kv-preview-data" src="{data}"
    width="{width}" height="{height}" type="application/pdf">\n',
  28. ' </div>\n' +
  29. ' {footer}\n' +
  30. '</div>',
  31. video: '<div class="file-preview-frame" id="{previewId}"
    data-fileindex="{fileindex}" data-template="{template}" title="{caption}" '
  32. + STYLE_SETTING + '>\n' +
  33. ' <div class="kv-file-content">' +
  34. ' <video class="kv-preview-data" width="{width}"
    height="{height}" controls>\n' +
  35. ' <source src="{data}" type="{type}">\n'
    + DEFAULT_PREVIEW + '\n' +
  36. ' </video>\n' +
  37. ' </div>\n' +
  38. ' {footer}\n' +
  39. '</div>\n',
  40. audio: '<div class="file-preview-frame" id="{previewId}"
    data-fileindex="{fileindex}" data-template="{template}" title="{caption}" '
  41. + STYLE_SETTING + '>\n' +
  42. ' <div class="kv-file-content">' +
  43. ' <audio class="kv-preview-data" controls>\n' +
  44. ' <source src="{data}" type="{type}">\n' +
    DEFAULT_PREVIEW + '\n' +
  45. ' </audio>\n' +
  46. ' </div>\n' +
  47. ' {footer}\n' +
  48. '</div>\n',
  49. flash: '<div class="file-preview-frame" id="{previewId}"
    data-fileindex="{fileindex}" data-template="{template}" title="{caption}" '
  50. + STYLE_SETTING + '>\n' +
  51. ' <div class="kv-file-content">' +
  52. ' <object type="application/x-shockwave-flash"
    width="{width}" height="{height}" data="{data}">\n' +
  53. OBJECT_PARAMS + '\n' + DEFAULT_PREVIEW + '\n' +
  54. ' </object>\n' +
  55. ' </div>\n' +
  56. ' {footer}\n' +
  57. '</div>\n',
  58. object: '<div class="file-preview-frame" id="{previewId}"
    data-fileindex="{fileindex}" data-template="{template}"
    title="{caption}" ' + STYLE_SETTING + '>\n' +
  59. ' <div class="kv-file-content">' +
  60. ' <object class="kv-preview-data" data="{data}"
    type="{type}" width="{width}" height="{height}">\n' +
  61. ' <param name="movie" value="{caption}" />\n'
    + OBJECT_PARAMS + '\n' + DEFAULT_PREVIEW + '\n' +
  62. ' </object>\n' +
  63. ' </div>\n' +
  64. ' {footer}\n' +
  65. '</div>',
  66. other: '<div class="file-preview-frame{frameClass}"
    id="{previewId}" data-fileindex="{fileindex}"
    data-template="{template}"' +
  67. ' title="{caption}" ' + STYLE_SETTING + '>\n' +
  68. ' <div class="kv-file-content">' +
  69. ' <div class="kv-preview-data file-preview-other-frame">\n'
    + DEFAULT_PREVIEW + '\n' +
  70. ' </div>\n' +
  71. ' </div>\n' +
  72. ' <div class="file-preview-other-footer">{footer}</div>\n' +
  73. '</div>'
  74. }

The values of the constants used in the above templates are as follows:

  1. STYLE_SETTING = 'style="width:{width};height:{height};"',
  2. OBJECT_PARAMS = ' <param name="controller" value="true" />\n' +
  3. ' <param name="allowFullScreen" value="true" />\n' +
  4. ' <param name="allowScriptAccess" value="always" />\n' +
  5. ' <param name="autoPlay" value="false" />\n' +
  6. ' <param name="autoStart" value="false" />\n'+
  7. ' <param name="quality" value="high" />\n',
  8. DEFAULT_PREVIEW = '<div class="file-preview-other">\n' +
  9. ' <span class="{previewFileIconClass}">{previewFileIcon}</span>\n' +
  10. '</div>'

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:

  1. {
  2. image: {width: "auto", height: "auto",
    'max-width': "100%",'max-height': "100%"},
  3. html: {width: "100%", height: "100%", 'min-height': "480px"},
  4. text: {width: "100%", height: "100%", 'min-height': "480px"},
  5. video: {width: "auto", height: "100%", 'max-width': "100%"},
  6. audio: {width: "100%", height: "30px"},
  7. flash: {width: "auto", height: "480px"},
  8. object: {width: "auto", height: "480px"},
  9. pdf: {width: "100%", height: "100%", 'min-height': "480px"},
  10. other: {width: "auto", height: "100%", 'min-height': "480px"}
  11. }

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:

  • prev: button to navigate to the PREVIOUS file content in the modal preview

  • next: button to navigate to the NEXT file content in the modal preview

  • toggleheader: button to toggle display and slide out/in the modal header

  • fullscreen: button to toggle zoomed preview to full screen display

  • borderless: button to toggle preview to a border less maximized state (only difference from fullscreen button is that it does not set the browser to a native full screen mode)

  • close: button to close the modal zoom preview dialog

The previewZoomButtonIcons defaults to the following configuration:

  1. {
  2. prev: '<i class="glyphicon glyphicon-triangle-left"></i>',
  3. next: '<i class="glyphicon glyphicon-triangle-right"></i>',
  4. toggleheader: '<i class="glyphicon glyphicon-resize-vertical"></i>',
  5. fullscreen: '<i class="glyphicon glyphicon-fullscreen"></i>',
  6. borderless: '<i class="glyphicon glyphicon-resize-full"></i>',
  7. close: '<i class="glyphicon glyphicon-remove"></i>'
  8. }

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:

  • prev: button to navigate to the PREVIOUS file content in the modal preview

  • next: button to navigate to the NEXT file content in the modal preview

  • toggleheader: button to toggle display and slide out/in the modal header

  • fullscreen: button to toggle zoomed preview to full screen display

  • borderless: button to toggle preview to a border less maximized state (only difference from fullscreen button is that it does not set the browser to a native full screen mode)

  • close: button to close the modal zoom preview dialog

The previewZoomButtonClasses defaults to the following configuration:

  1. {
  2. prev: 'btn btn-navigate',
  3. next: 'btn btn-navigate',
  4. toggleheader: 'btn btn-default btn-header-toggle',
  5. fullscreen: 'btn btn-default',
  6. borderless: 'btn btn-default',
  7. close: 'btn btn-default'
  8. }

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:

  • prev: button to navigate to the PREVIOUS file content in the modal preview

  • next: button to navigate to the NEXT file content in the modal preview

  • toggleheader: button to toggle display and slide out/in the modal header

  • fullscreen: button to toggle zoomed preview to full screen display

  • borderless: button to toggle preview to a border less maximized state (only difference from fullscreen button is that it does not set the browser to a native full screen mode)

  • close: button to close the modal zoom preview dialog

The previewZoomButtonClasses defaults to the following configuration:

      1. {
      2. prev: 'View previous file',
      3. next: 'View next file',
      4. toggleheader: 'Toggle header',
      5. fullscreen: 'Toggle full screen',
      6. borderless: 'Toggle borderless mode',
      7. close: 'Close detailed preview'
      8. }

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:

  1. ['jpg', 'gif', 'png', 'txt'

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。

默认设置如下:

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

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:

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

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:

  • key: string, is the tag to be replaced and as a standard is recommended to be enclosed between braces.

  • value: string|function, is the value that will replace the tag key above. This can be setup either as a string or callback function.

  1. // example 1 - tags with value set as string
  2. customLayoutTags: {
  3. '{tagA}': '<span class="label label-default">Tag A</span>',
  4. '{tagB}': 'Tag B',
  5. }
  6. // example 2 - tags with value set as callback
  7. customLayoutTags: {
  8. '{tagC}': function() {
  9. return $("#element-id").val();
  10. }
  11. }

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:

  • key: string, is the tag to be replaced and as a standard is recommended to be enclosed between braces.

  • value: string|function, is the value that will replace the tag key above. This can be setup either as a string or callback function.

  1. // example 1 - tags with value set as string
  2. customPreviewTags: {
  3. '{tagA}': '<span class="label label-default">Tag A</span>',
  4. '{tagB}': 'Tag B',
  5. }
  6. // example 2 - tags with value set as callback
  7. customPreviewTags: {
  8. '{tagC}': function() {
  9. return $("#element-id").val();
  10. }
  11. }

previewSettings

对象用于呈现每个预览文件类型的格式设置 (宽度和高度)。默认设置如下:

object the format settings (width and height) for rendering each preview file type. This is by default setup as following:

  1. {
  2. image: {width: "auto", height: "160px"},
  3. html: {width: "213px", height: "160px"},
  4. text: {width: "160px", height: "136px"},
  5. video: {width: "213px", height: "160px"},
  6. audio: {width: "213px", height: "80px"},
  7. flash: {width: "213px", height: "160px"},
  8. object: {width: "213px", height: "160px"},
  9. other: {width: "160px", height: "160px"}
  10. }

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:

      1. // vType: is the file mime type
      2. // vName: is the file name
      3. {
      4. image: function(vType, vName) {
      5. return (typeof vType !== "undefined") ? vType.match('image.*') : vName.match(/\.(gif|png|jpe?g)$/i);
      6. },
      7. html: function(vType, vName) {
      8. return (typeof vType !== "undefined") ? vType == 'text/html' : vName.match(/\.(htm|html)$/i);
      9. },
      10. text: function(vType, vName) {
      11. return typeof vType !== "undefined" && vType.match('text.*') || vName.match(/\.(txt|md|csv|nfo|php|ini)$/i);
      12. },
      13. video: function (vType, vName) {
      14. return typeof vType !== "undefined" && vType.match(/\.video\/(ogg|mp4|webm)$/i) || vName.match(/\.(og?|mp4|webm)$/i);
      15. },
      16. audio: function (vType, vName) {
      17. return typeof vType !== "undefined" && vType.match(/\.audio\/(ogg|mp3|wav)$/i) || vName.match(/\.(ogg|mp3|wav)$/i);
      18. },
      19. flash: function (vType, vName) {
      20. return typeof vType !== "undefined" && vType == 'application/x-shockwave-flash' || vName.match(/\.(swf)$/i);
      21. },
      22. object: function (vType, vName) {
      23. return true;
      24. },
      25. other: function (vType, vName) {
      26. return true;
      27. },
      28. }

previewFileIcon

字符串, 当检测到不可读的预览文件类型时, 将在每个预览文件缩略图中显示的图标。默认为 <i class="glyphicon glyphicon-file"> </i> &nbsp;。 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> &nbsp;.

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:

  1. previewFileIconSettings: {
  2. 'doc': '<i class="fa fa-file-word-o text-primary"></i>',
  3. 'xls': '<i class="fa fa-file-excel-o text-success"></i>',
  4. 'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
  5. 'jpg': '<i class="fa fa-file-photo-o text-warning"></i>',
  6. 'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
  7. 'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
  8. }

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:

      • ext, string, the file extension (without the . [dot]) of the file currently selected in the preview.

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:

      1. previewFileExtSettings: {
      2. 'doc': function(ext) {
      3. return ext.match(/(doc|docx)$/i);
      4. },
      5. 'xls': function(ext) {
      6. return ext.match(/(xls|xlsx)$/i);
      7. },
      8. 'ppt': function(ext) {
      9. return ext.match(/(ppt|pptx)$/i);
      10. }
      11. }

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>&nbsp;.

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> &nbsp;.

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> &nbsp;

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:

  1. {id: 100, value: '100 Details'}

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:

    • previewId: the identifier for the preview file container (only available when uploading each thumbnail file)

    • index: the zero-based sequential index of the loaded file in the preview list (only available when uploading each thumbnail file)

        1. // previewId and index is only available for individual file upload via the thumbnail
        2. function (previewId, index) {
        3. var obj = {};
        4. $('.your-form-class').find('input').each(function() {
        5. var id = $(this).attr('id'), val = $(this).val();
        6. obj[id] = val;
        7. });
        8. return obj;
        9. }
     
          

    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:

         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
    上一篇:Unity - Photon PUN 本地与网络同步的逻辑分离 (二)


    下一篇:External Input Counter and External interrupt