File Input Features

language

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.

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

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

showPreview

showRemove

showUpload

showCancel

showClose

showUploadedThumbs

showBrowse

browseOnZoneClick

autoReplace

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

previewClass

mainClass

frameClass

purifyHtml

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 类以显示每个文件类型:

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

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

initialPreviewDelimiter

initialPreviewAsData

initialPreviewFileType

initialPreviewConfig

数组, 用于为每个 initialPreview 项设置重要属性的配置 (作为 initialPreview 的一部分设置)。数组中的每个元素都应是由以下键组成的对象/关联数组:

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

removeFromPreviewOnError

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 设置了值。

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

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

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. }

deleteUrl

initialCaption

overwriteInitial

layoutTemplates

下面的模板将用于呈现用于上载、删除、取消和浏览的主按钮。

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.

previewTemplates

如前所述, 如果您来自早期版本 (在 v2.4.0 之前), 则所有预览模板都已组合成一个属性, 而不是图像、文本等单独的模板。

上述模板中使用的常量值如下所示:

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>'

previewZoomSettings

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

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:

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

preferIconicZoomPreview

previewZoomButtonTitles

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

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'

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

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.

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.

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

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

previewFileIconClass

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

browseLabel

browseIcon

browseClass

removeLabel

removeIcon

removeClass

removeTitle

uploadLabel

uploadIcon

uploadClass

uploadTitle

uploadUrl

uploadAsync

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

minImageHeight

maxImageHeight

minImageWidth

maxImageWidth

resizeImage

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: