配置项

100门课程在线学, 成为月入5万架构师

这个插件支持以下参数:

language

字符串，这个插件的语言配置，它可以使这个插件的展示信息用你所在地区的语言来表达（你必须设置自己语言的ISO编码）。你可以在同一个页面上展示多种语言的插件。你必须按照之前在翻译部分介绍的那样定义区域语言编码JS文件。这个文件必须在fileinput.js后面加载。

theme

字符串类型，用于插件的主题（如果你没有设置则默认为内置主题）。自版本v4.3.2开始，这个文件输入插件支持高级主题，并可以在同一界面中对多个文件输入插件分开使用不同主题。要想使用这样的功能，按照下面的步骤来做:

  • 依次加载你需要的主题JS文件（如，使用Font Awsome主题加载theme/fa/fa.js）。主题JS文件必须在fileinput.js之后加载。
  • 在插件中设置主题属性为你在上步中载入的预期主题（如，'fa'）。
  • 插件会自动从JS文件（例如，通过$fileinputThemes['<theme-name>']）读取对应主题名的主题配置。
  • 插件将自动将CSS选择器theme-<theme-name>添加到文件输入容器，以便您可以覆盖样式。这些主题的CSS可以由社区在themes/THEME_NAME回购的文件夹中提交。
  • 如果需要，你还可以另外加载任何主题CSS文件。 注意 目前该插件包括Font Awesome和Glyphicons主题。未来插件可能会增加更多高级主题，也可能在这个社区里提供。

showCaption

布尔值，是否显示文件名。默认值为true。

showPreview

布尔值，是否显示文件预览。默认值为true。

showRemove

布尔值，是否显示删除/清除按钮。默认值为true。

showUpload

布尔值，是否显示文件上传按钮。默认值为true。它默认为一个表单提交按钮，除非指定了uploadUrl属性。

showCancel

布尔值，是否显示文件上传取消按钮。默认值为true。只有在AJAX上传过程中，才会启用和显示。

showClose

布尔值，是否显示预览界面的关闭图标。默认为true。只有当showPreview为true或者在预览模板中使用{close}标签时才会被解析。

showUploadedThumbs

布尔值，是否在预览窗口中持续显示已经上传的文件缩略图（用于ajax上传），直到按下删除/清除按钮。默认值为true。当设置为false时，下一批选择上传的文件将从预览中清除这些已经上传的文件缩略图。

showBrowse

布尔值，是否显示文件浏览按钮。默认为true。

browseOnZoneClick

布尔值，是否在点击预览区域时触发文件浏览/选择。默认为false。

autoReplace

布尔值，当上传文件达到maxFileCount限制并且一些新的文件被选择后，是否自动替换预览中的文件。如果maxFileCount值有效，那么这个参数会起作用。默认为false。

captionClass

字符串，任何加到文件名容器的额外CSS类。

previewClass

字符串，任何加到预览容器的额外CSS类。

mainClass

字符串，任何加到插件主体容器的额外CSS类，用来渲染文件名和浏览、移除、上传按钮。默认为file-caption-main。

frameClass

字符串，额外应用于每个文件缩略图框架的CSS类。默认为krajee-default。

purifyHtml

布尔值，是否在预览中净化HTML内容类型显示的HTML内容。默认为true。这个功能需要加载cure53的DOM净化插件。

fileSizeGetter

布尔值，基于byte参数生成易于理解的文件大小的回调函数。如果没有设置，默认如下回调函数：

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类file-preview-image
  • 文本文件：包含CSS类file-preview-text
  • 其他文件：包含CSS类file-preview-other

如何设置各种文件类型初始预览的示例：

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

整数值，将添加到预览中选择的文件数的初始预览项的数量。当overwriteInitial设置为false时，在显示正确的标题的情况下适用。

initialPreviewDelimiter

字符串，用于将初始预览内容分割为单个文件缩略图的分隔符（只有当initialPreview参数传入一个字符串而非数组时有效）。默认为*$$*。

initialPreviewAsData

布尔值，是否将初始预览内容集解析为数据而不是原始标记语言。为了向下兼容性（v4.3.2版本之前），一般默认为false。

initialPreviewFileType

字符串，在previewSettings中的键内配置的文件模板类型之一。这对于识别用于显示特定文件的内容的模板很有用。默认为image。

initialPreviewConfig

数组，为每个initialPreview条目（就是initialPreview中的每个预览）设置重要属性的配置。数组中的每个元素都应该是一个由以下键组成的键值对数组：

type：字符串，在previewSettings中的键内配置的文件模板类型之一。它会覆盖initialPreviewFileType设置。对识别用于显示特定文件的内容的模板很有用。

filetype：字符串，标识内容的文件互联网多媒体类型。适用于如音频或视频这些确定的文件模板(例如video/mp4)。

size：浮点数，单位为byte的文件大小值，用来展示在文件大小布局模板中。如果没有设置或者没有设置为浮点数，那么将显示一个空白字符串。

previewAsData：布尔值，是否将此预览内容解析为数据输入，而不是原始标记语言。它会覆盖initialPreviewAsData设置。

caption：字符串，每个初始化预览文件的标题或者文件名 。

width：字符串，图像或者预览内容的CSS宽度。

url：字符串，通过AJAX POST响应删除预览中图像或内容的URL地址。如果没有设置会默认为deleteUrl。

key：字符串或对象，通过AJAX POST方法传给url的数据。

frameClass：字符串，额外应用于每个文件缩略图框架的CSS类。

frameAttr：对象，用于缩略图框架的HTML属性设置（用键值对设置）。

extra：对象或者函数，通过POST方法传递给初始预览的删除url或者AJAX服务器响应的额外数据。如果没有设置，它将默认为deleteExtraData。

一个initialPreviewConfig配置示例（对于先设置initialPreviewContent）可以是这样的：

// 使用数据键创建初始预览
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'>",
],
// 初始预览配置
initialPreviewConfig: [
    {
        caption: 'desert.jpg',
        width: '120px',
        url: '/localhost/avatar/delete',
        key: 100,
        extra: {id: 100}
    },
    {
        caption: 'jellyfish.jpg', 
        width: '120px', 
        url: '/localhost/avatar/delete', 
        key: 101, 
        frameClass: 'my-custom-frame-css',
        frameAttr: {
            style: 'height:80px',
            title: 'My Custom Title',
        },
        extra: function() { 
            return {id: $("#id").val()};
        },
    }
]

请注意，initialPreview 和 initialPreviewConfig也可以通过简单的方式进行创建，而不需要渲染整个标记，只是传递数据。这样做的话， initialPreviewAsData属性必须设置为true，并且将使用初始预览类型的模板来渲染预览。在initialPreviewConfig中，键值type会识别传递的数据的预览文件类型。

例如，初始预览可以当做数据通过以下方式创建：

initialPreview: [
    // 图像数据
   'http://lorempixel.com/800/460/business/1',
    // 图像原生标记语言
    '<img src="http://lorempixel.com/800/460/business/2" class="kv-preview-data file-preview-image" style="height:160px">',
    // 文本数据
    "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.",
    // pdf数据
    'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/pdf-sample.pdf',
    // 视频数据
    "http://kartik-v.github.io/bootstrap-fileinput-samples/samples/small.mp4",
],
initialPreviewAsData: true, // 默认标记 
initialPreviewConfig: [
    {caption: "Business 1.jpg", size: 762980, url: "$urlD", key: 11},
    {previewAsData: false, size: 823782, caption: "Business 2.jpg", url: "$urlD", key: 13}, 
    {caption: "Lorem Ipsum.txt", type: "text", size: 1430, url: "$urlD", key: 12}, 
    {type: "pdf", size: 8000, caption: "PDF Sample.pdf", url: "$urlD", key: 14}, 
    {type: "video", size: 375000, filetype: "video/mp4", caption: "Krajee Sample.mp4", url: "$urlD", key: 15},  
],

注意 AJAX删除操作会通过POST方法发送如下两个数据：

  • key：设置它等同于在initialPreviewConfig['key']中创建
  • extra：如果没有设置格式，这额外的数据会通过initialPreviewConfig['extra']或者deleteExtraData来传递。

initialPreviewShowDelete

布尔值，是否为每个使用initialPreview创建的缩略图显示删除按钮。

removeFromPreviewOnError

布尔值，文件缩略图是否应该从预览中删除异常缩略图。默认为false。

previewThumbTags

数组，它是缩略图模板中使用的一组标签，将在缩略图渲染时用缩略图标记动态替换。举个例子：

// 更改缩略图脚部模板
layoutTemplates.footer = '<div class="file-thumbnail-footer">\n' +
'    <div class="file-caption-name">{caption}{size}</div>\n' +
'    {CUSTOM_TAG_NEW}\n' +
'    {CUSTOM_TAG_INIT}\n' +
'    {actions}\n' +
'</div>';

// 设置预览模板标签
previewThumbTags = {
    '{CUSTOM_TAG_NEW}': '<span class="custom-css">CUSTOM MARKUP</span>',
    '{CUSTOM_TAG_INIT}': ' '
};

initialPreviewThumbTags

数组，这是previewThumbTags的扩展，专门用于初始预览内容--但将被配置为与每个初始预览缩略图对应的对象数组。通过initialPreview设置的初始预览缩略图将读取此配置以替换标签。延续上面的例子：

// 更改缩略图脚部模板
layoutTemplates.footer = '<div class="file-thumbnail-footer">\n' +
'    <div class="file-caption-name">{caption}{size}</div>\n' +
'    {CUSTOM_TAG_NEW}\n' +
'    {CUSTOM_TAG_INIT}\n' +
'    {actions}\n' +
'</div>';

// 使用数据键创建初始化预览
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'>",
],

// 设置预览模板标签
initialPreviewThumbTags = {
    '{CUSTOM_TAG_NEW}': ' ',
    '{CUSTOM_TAG_INIT}': '<span class="custom-css">CUSTOM MARKUP</span>'
};

deleteExtraData

对象或者函数，通过POST方法传递给初始预览的删除url或者AJAX服务器响应的额外数据。它会被initialPreviewConfig['extra']属性覆盖。 此属性只有当你已经给initialPreviewConfig['url']或deleteUrl传了一个值且在初始预览中使用ajax删除有效。

它可以设置为对象（键值对数组）或回调函数。设置为对象可以像下面的例子一样：

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

设置为回调函数可以像下面一样创建：

function() {
    var obj = {};
    $('.your-form-class').find('input').each(function() {
        var id = $(this).attr('id'), val = $(this).val();
        obj[id] = val;
    });
    return obj;
}

Note ajax删除操作将通过POST方法将以下数据发送到服务器：

  • key：initialPreviewConfig['key']中创建的键
  • 如果没有设置格式，其他额外数据作为键值对通过initialPreviewConfig['extra']或deleteExtraDatavalue传递。

deleteUrl

字符串，通过AJAX POST响应删除预览中图像或内容的URL地址。它会被initialPreviewConfig['url']属性覆盖。

initialCaption

字符串，要显示的初始预览标题文本。如果你在这没有设置并且initialPreview设置为true，那么这个参数默认设置为"{preview-file-count} files selected"， {preview-file-count}是在initialPreview中上传的文件的计数。

overwriteInitial

布尔值，是否要覆盖初始预览内容和标题设置。默认为true，因此当新文件上传或文件被清除时任何initialPreview内容集将被覆盖。将其设置为false将有助于始终显示从数据库中保存的图像或文件，尤其是在使用多文件上传功能时尤其有用。

layoutTemplates

对象，渲染布局每部分的模板配置。您可以设置以下模板来控制小部件布局：

  • main1：使用标题渲染小部件的模板。

  • main2：不使用标题渲染小部件的模板。

  • preview：渲染预览的模板。

  • fileIcon：标题文本前渲染的图标。

  • size: 在缩略图中展示文件大小的模板。标签{sizeText}应该用于渲染文件大小数据。

  • caption：渲染标题的模板。

  • modal：渲染模态框（用于文件内容缩放浏览）的模板。

  • progress：正在进行上传时的进度条模板（批量/大量上传以及每个预览缩略图中的异步/单次上传）。每个缩略图中显示的上传进度条将被包装在一个class-thumb-progress的CSS类的容器中。以下标签将被解析并自动替换：

    • {percent}：将被替换为上传进度百分比。

  • footer：每个文件预览缩略图页脚部分的模板。以下标签将被自动解析并替换：

    • {actions}：会被action输出的模板替换。

  • actions：要在缩略图footer中显示的文件操作按钮的模板。以下标签将被自动解析并替换：

    • {upload}：将被替换为actionUpload模板的输出

    • {delete}：将被替换为actionDelete模板的输出。

  • 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 within initialPreviewConfig.

    • {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 within initialPreviewConfig. 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 is layoutTemplates.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:

{
    main1: '{preview}\n' +
        '<div class="kv-upload-progress hide"></div>\n' +
        '<div class="input-group {class}">\n' +
        '   {caption}\n' +
        '   <div class="input-group-btn">\n' +
        '       {remove}\n' +
        '       {cancel}\n' +
        '       {upload}\n' +
        '       {browse}\n' +
        '   </div>\n' +
        '</div>',
    main2: '{preview}\n<div class="kv-upload-progress hide"></div>\n{remove}\n{cancel}\n{upload}\n{browse}\n',
    preview: '<div class="file-preview {class}">\n' +
        '    {close}\n' +
        '    <div class="close fileinput-remove">×</div>\n' +
        '    <div class="{dropClass}">\n' +
        '    <div class="file-preview-thumbnails">\n' +
        '    </div>\n' +
        '    <div class="clearfix"></div>' +
        '    <div class="file-preview-status text-center text-success"></div>\n' +
        '    <div class="kv-fileinput-error"></div>\n' +
        '    </div>\n' +
        '</div>',
    icon: '<span class="glyphicon glyphicon-file kv-caption-icon"></span>',
    caption: '<div tabindex="-1" class="form-control file-caption {class}">\n' +
        '   <div class="file-caption-name"></div>\n' +
        '</div>',
    btnDefault: '<button type="{type}" tabindex="500" title="{title}" class="{css}"{status}>{icon}{label}</button>',
    btnLink: '<a href="{href}" tabindex="500" title="{title}" class="{css}"{status}>{icon}{label}</a>',
    btnBrowse: '<div tabindex="500" class="{css}"{status}>{icon}{label}</div>',
    modalMain: '<div id="kvFileinputModal" class="file-zoom-dialog modal fade" tabindex="-1" aria-labelledby="kvFileinputModalLabel"></div>',
    modal: '<div class="modal-dialog modal-lg" role="document">\n' +
        '  <div class="modal-content">\n' +
        '    <div class="modal-header">\n' +
        '      <div class="kv-zoom-actions pull-right">{toggleheader}{fullscreen}{borderless}{close}</div>\n' +
        '      <h3 class="modal-title">{heading} <small><span class="kv-zoom-title"></span></small></h3>\n' +
        '    </div>\n' +
        '    <div class="modal-body">\n' +
        '      <div class="floating-buttons"></div>\n' +
        '      <div class="kv-zoom-body file-zoom-content"></div>\n' + '{prev} {next}\n' +
        '    </div>\n' +
        '  </div>\n' +
        '</div>\n',
    progress: '<div class="progress">\n' +
        '    <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' +
        '        {status}\n' +
        '     </div>\n' +
        '</div>',
    footer: '<div class="file-thumbnail-footer">\n' +
        '    <div class="file-caption-name" style="width:{width}">{caption}</div>\n' +
        '    {progress} {actions}\n' +
        '</div>',
    actions: '<div class="file-actions">\n' +
        '    <div class="file-footer-buttons">\n' +
        '        {upload} {delete} {zoom} {other}' +
        '    </div>\n' +
        '    {drag}\n' +
        '    <div class="file-upload-indicator" title="{indicatorTitle}">{indicator}</div>\n' +
        '    <div class="clearfix"></div>\n' +
        '</div>',
    actionDelete: '<button type="button" class="kv-file-remove {removeClass}" title="{removeTitle}"{dataUrl}{dataKey}>{removeIcon}</button>\n',
    actionUpload: '<button type="button" class="kv-file-upload {uploadClass}" title="{uploadTitle}">{uploadIcon}</button>\n',
    actionZoom: '<button type="button" class="kv-file-zoom {zoomClass}" title="{zoomTitle}">{zoomIcon}</button>',
    actionDrag: '<span class="file-drag-handle {dragClass}" title="{dragTitle}">{dragIcon}</span>';

}

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

对象，用于渲染每个预览文件类型的模板配置。以下文件类型被识别：

  • image：图像文件预览模板。

  • text：文本文件预览模板。

  • html：html文件预览模板。

  • video：视频文件预览模板（HTML5视频标签支持）。

  • audio：音频文件预览模板（HTML5音频标签支持）。

  • flash：flash文件预览模板（目前支持webkit浏览器）。

  • object：所有的其他文件预览模板 - 默认当做对象对待。要禁用此行为，配置allowedPreviewTypes属性。

  • generic：这个模板仅用于渲染initialPreview直接传过来的原生标记语言格式内容。

以下标签将在每个模板中进行解析和替换：

  • {previewId}：将被替换为生成的预览框容器的标识符。

  • {template}：将被替换为文件模板类型（例如，image、text等）。

  • {data}：会被每种预览类型的数据源替换。

  • {width}：会被previewSettings中设置的各个文件类型的宽度替换。

  • {height}：会被previewSettings中设置的各个文件类型的高度替换。

  • {caption}：会被文件名替换。

  • {type}：会被文件类型替换。

  • {content}：这仅适用于generic模板。它将被替换为在initialPreview中设置的原始HTML标记语言。以上标签都不会被解析为generic模板。

  • {dialog}：目前仅适用于文本文件预览。将被JS代码替换为启动模态对话框。

  • {zoomTitle}：目前仅适用于文本文件预览。这将被替换为msgZoomTitle属性。这是在缩放按钮的悬停上显示的标题（点击将显示文本文件）。

  • {zoomInd}：目前仅适用于文本文件预览。这将被zoomIndicator属性替换。这是在缩放按钮的悬停上显示的标题（点击将显示文本文件）。

  • {heading}：目前仅适用于文本文件预览。这表示模态对话标题标题。这将被替换为msgZoomModalHeading属性。

如前所述，如果你使用的是早期版本（v2.4.0之前），则所有预览模板现已被组合为一个属性，而不是用于图像，文本等的单独模板。

{
    generic: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}" data-template="{template}">\n' +
        '   {content}\n' +
        '   {footer}\n' +
        '</div>\n',
    image: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}" data-template="{template}">\n' +
        '   <div class="kv-file-content">' +
        '       <img src="{data}" class="kv-preview-data file-preview-image" title="{caption}" alt="{caption}" ' + STYLE_SETTING + '>\n' +
        '   </div>\n' +
        '   {footer}\n' +
        '</div>\n',
    text: '<div class="file-preview-frame{frameClass}" id="{previewId}" data-fileindex="{fileindex}" data-template="{template}">\n' +
        '   <div class="kv-file-content">' +
        '       <textarea class="kv-preview-data file-preview-text" title="{caption}" readonly ' 
                + STYLE_SETTING + '>{data}</textarea>',
        '   </div>\n' +
        '   {footer}\n' +
        '</div>',
    html: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}" data-template="{template}">\n' +
        '   <div class="kv-file-content">' +
        '       <div class="kv-preview-data file-preview-html" title="{caption}" ' + STYLE_SETTING + '>{data}</div>\n' +
        '   </div>\n' +
        '   {footer}\n' +
        '</div>',
    pdf: '<div class="file-preview-frame{frameClass}" id="{previewId}" data-fileindex="{fileindex}" data-template="{template}">\n' +
        '   <div class="kv-file-content">' +
        '       <embed class="kv-preview-data" src="{data}" width="{width}" height="{height}" type="application/pdf">\n',
        '   </div>\n' +
        '   {footer}\n' +
        '</div>',
    video: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}" data-template="{template}" title="{caption}" ' 
            + STYLE_SETTING + '>\n' +
        '   <div class="kv-file-content">' +
        '       <video class="kv-preview-data" width="{width}" height="{height}" controls>\n' +
        '           <source src="{data}" type="{type}">\n' + DEFAULT_PREVIEW + '\n' +
        '       </video>\n' +
        '   </div>\n' +
        '   {footer}\n' +
        '</div>\n',
    audio: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}" data-template="{template}" title="{caption}" '
            + STYLE_SETTING + '>\n' +
        '   <div class="kv-file-content">' +      
        '        <audio class="kv-preview-data" controls>\n' +
        '            <source src="{data}" type="{type}">\n' + DEFAULT_PREVIEW + '\n' +
        '        </audio>\n' +
        '   </div>\n' +
        '   {footer}\n' +
        '</div>\n',
    flash: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}" data-template="{template}" title="{caption}" '
            + STYLE_SETTING + '>\n' +
        '   <div class="kv-file-content">' +
        '       <object type="application/x-shockwave-flash" width="{width}" height="{height}" data="{data}">\n' +
                OBJECT_PARAMS + '\n' + DEFAULT_PREVIEW + '\n' +
        '       </object>\n' +
        '   </div>\n' +
        '   {footer}\n' +
        '</div>\n',
    object: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}" data-template="{template}" title="{caption}" ' + STYLE_SETTING + '>\n' +
        '   <div class="kv-file-content">' +
        '       <object class="kv-preview-data" data="{data}" type="{type}" width="{width}" height="{height}">\n' +
        '          <param name="movie" value="{caption}" />\n' + OBJECT_PARAMS + '\n' + DEFAULT_PREVIEW + '\n' +
        '       </object>\n' + 
        '   </div>\n' +
        '   {footer}\n' +
        '</div>',
    other: '<div class="file-preview-frame{frameClass}" id="{previewId}" data-fileindex="{fileindex}" data-template="{template}"' +
        ' title="{caption}" ' + STYLE_SETTING + '>\n' +
        '   <div class="kv-file-content">' +
        '       <div class="kv-preview-data file-preview-other-frame">\n' + DEFAULT_PREVIEW + '\n' +
        '       </div>\n' +
        '   </div>\n' +
        '   <div class="file-preview-other-footer">{footer}</div>\n' +
        '</div>'
}

上述模板中使用的常数值如下：

STYLE_SETTING = 'style="width:{width};height:{height};"',
OBJECT_PARAMS = '      <param name="controller" value="true" />\n' +
    '      <param name="allowFullScreen" value="true" />\n' +
    '      <param name="allowScriptAccess" value="always" />\n' +
    '      <param name="autoPlay" value="false" />\n' +
    '      <param name="autoStart" value="false" />\n'+
    '      <param name="quality" value="high" />\n',
DEFAULT_PREVIEW = '<div class="file-preview-other">\n' +
    '   <span class="{previewFileIconClass}">{previewFileIcon}</span>\n' +
    '</div>'

其中：

previewZoomSettings

对象，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:

{
    image: {width: "auto", height: "auto", 'max-width': "100%",'max-height': "100%"},
    html: {width: "100%", height: "100%", 'min-height': "480px"},
    text: {width: "100%", height: "100%", 'min-height': "480px"},
    video: {width: "auto", height: "100%", 'max-width': "100%"},
    audio: {width: "100%", height: "30px"},
    flash: {width: "auto", height: "480px"},
    object: {width: "auto", height: "480px"},
    pdf: {width: "100%", height: "100%", 'min-height': "480px"},
    other: {width: "auto", height: "100%", 'min-height': "480px"}
}

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:

{
    prev: '<i class="glyphicon glyphicon-triangle-left"></i>',
    next: '<i class="glyphicon glyphicon-triangle-right"></i>',
    toggleheader: '<i class="glyphicon glyphicon-resize-vertical"></i>',
    fullscreen: '<i class="glyphicon glyphicon-fullscreen"></i>',
    borderless: '<i class="glyphicon glyphicon-resize-full"></i>',
    close: '<i class="glyphicon glyphicon-remove"></i>'
}

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:

{
    prev: 'btn btn-navigate',
    next: 'btn btn-navigate',
    toggleheader: 'btn btn-default btn-header-toggle',
    fullscreen: 'btn btn-default',
    borderless: 'btn btn-default',
    close: 'btn btn-default'
}

preferIconicPreview

boolean, whether to force iconic preview of file thumbnails in the preview zone, by using the configuration for previewFileIconSettings and previewFileExtSettings. Defaults to false. If set to true, it will try to force an iconic file thumbnail preview if possible.

preferIconicZoomPreview

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

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:

{
    prev: 'View previous file',
    next: 'View next file',
    toggleheader: 'Toggle header',
    fullscreen: 'Toggle full screen',
    borderless: 'Toggle borderless mode',
    close: 'Close detailed preview'
}

allowedFileTypes

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.

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

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:

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

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

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

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. ```JavaScript // example 1 - tags with value set as string customLayoutTags: { '{tagA}': 'Tag A', '{tagB}': 'Tag B', }

// example 2 - tags with value set as callback customLayoutTags: { '{tagC}': function() { return $("#element-id").val(); } }

## 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.
```JavaScript
// example 1 - tags with value set as string
customPreviewTags: {
    '{tagA}': '<span class="label label-default">Tag A</span>',
    '{tagB}': 'Tag B',
}

// example 2 - tags with value set as callback
customPreviewTags: {
    '{tagC}': function() {
        return $("#element-id").val();
    }
}
```JavaScript
## previewSettings
object the format settings (width and height) for rendering each preview file type. This is by default setup as following:
```JavaScript
{
    image: {width: "auto", height: "160px"},
    html: {width: "213px", height: "160px"},
    text: {width: "160px", height: "136px"},
    video: {width: "213px", height: "160px"},
    audio: {width: "213px", height: "80px"},
    flash: {width: "213px", height: "160px"},
    object: {width: "213px", height: "160px"},
    other: {width: "160px", height: "160px"}
}

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:

// vType: is the file mime type
// vName: is the file name
{
    image: function(vType, vName) {
        return (typeof vType !== "undefined") ? vType.match('image.*') : vName.match(/\.(gif|png|jpe?g)$/i);
    },
    html: function(vType, vName) {
        return (typeof vType !== "undefined") ? vType == 'text/html' : vName.match(/\.(htm|html)$/i);
    },
    text: function(vType, vName) {
        return typeof vType !== "undefined" && vType.match('text.*') || vName.match(/\.(txt|md|csv|nfo|php|ini)$/i);
    },
    video: function (vType, vName) {
        return typeof vType !== "undefined" && vType.match(/\.video\/(ogg|mp4|webm)$/i) || vName.match(/\.(og?|mp4|webm)$/i);
    },
    audio: function (vType, vName) {
        return typeof vType !== "undefined" && vType.match(/\.audio\/(ogg|mp3|wav)$/i) || vName.match(/\.(ogg|mp3|wav)$/i);
    },
    flash: function (vType, vName) {
        return typeof vType !== "undefined" && vType == 'application/x-shockwave-flash' || vName.match(/\.(swf)$/i);
    },
    object: function (vType, vName) {
        return true;
    },
    other: function (vType, vName) {
        return true;
    },
}

previewFileIcon

string, the icon to be shown in each preview file thumbnail when an unreadable file type for preview is detected. Defaults to  .

previewFileIconClass

string, the CSS class to be applied to the preview file icon container. Defaults to file-other-icon.

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 and allowedPreviewMimeTypes

You can setup previewFileIconSettings as shown below:

previewFileIconSettings: {
    'doc': '<i class="fa fa-file-word-o text-primary"></i>',
    'xls': '<i class="fa fa-file-excel-o text-success"></i>',
    'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
    'jpg': '<i class="fa fa-file-photo-o text-warning"></i>',
    'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
    'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
}

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.). The value 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:

previewFileExtSettings: {
    'doc': function(ext) {
        return ext.match(/(doc|docx)$/i);
    },
    'xls': function(ext) {
        return ext.match(/(xls|xlsx)$/i);
    },
    'ppt': function(ext) {
        return ext.match(/(ppt|pptx)$/i);
    }
}

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  .

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  .

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  .

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:

  {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)

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

    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 set resizeImage 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 set resizeImage 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 the JavaScript-Canvas-to-Blob plugin by blueimp by including canvas-to-blob.js in your application. This JS file must be loaded before fileinput.js on the page. The JavaScript-Canvas-to-Blob source files are available in js/plugins folder of bootstrap-fileinput project page. The canvas-to-blob.js plugin is a polyfill for canvas.toBlob method and is needed for allowing the resized image files via HTML5 canvas to be returned as a blob

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 to width, 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:

// Example for resizePreference = 'width'
// - will resize image width to 200 px if image width is > 200 px
// - will resize image height to 200 px if image width is < 200 px and
//   image height is > 200 px
// if none of the above image will be returned as is
$('#file-input').fileinput({
    resizeImage: true,
    maxImageWidth: 200,
    maxImageHeight: 200,
    resizePreference: 'width'
});

resizeImageQuality

float, the quality of the resized image. This must be a decimal number between 0.00 to 1.00. Defaults to 0.92.

resizeDefaultImageType

string, the default image mime type of the converted image after resize. Defaults to image/jpeg.

resizeIfSizeMoreThan

float, the file size in KB beyond which the resize will be performed. Defaults to 0. Only files beyond a size set here will be resized.

minFileSize

float, the minimum file size for upload in KB. The file size must exceed the value set here, else a validation error is thrown using the msgSizeTooSmall setting. Defaults to 0. If this is set to null, then the validation is skipped and no minimum value check will be performed.

maxFileSize

float, the maximum file size for upload in KB. If greater than this, a validation error is thrown using the msgSizeTooLarge setting. If set to 0, it means size allowed is unlimited. Defaults to 0.

maxFilePreviewSize

float, the maximum preview file size for upload in KB. Files beyond this size will have a default thumbnail without the preview content. If set to 0 or null, it means the preview size allowed is unlimited. This is to be set carefully for optimal browser memory performance when previewing large files. Defaults to 25600 (i.e. 25 MB).

minFileCount

int the minimum number of files allowed for each multiple upload. If set to 0, it means number of files are optional. Defaults to 0.

maxFileCount

int the maximum number of files allowed for each multiple upload. If set to 0, it means number of files allowed is unlimited. Defaults to 0.

validateInitialCount

boolean, whether to include initial preview file count (server uploaded files) in validating minFileCount and maxFileCount. Defaults to false.

msgNo

string, the message that will be displayed when ZERO files are found. Defaults to No.

msgCancelled

string, the message that will be displayed within the progress bar when file upload is aborted or cancelled. Defaults to Cancelled.

msgZoomTitle

string, the title displayed (before the file name) on hover of the zoom button for zooming the file content in a modal window. This is currently applicable only for text file previews. Defaults to View details.

msgZoomModalHeading

string, the heading of the modal dialog that displays the zoomed file content. This is currently applicable only for text file previews. Defaults to Detailed Preview.

msgSizeTooSmall

string, the message to be displayed when the file size is less than or equal to the minimum size set in minFileSize. Defaults to:

File "{name}" ({size} KB) is too small and must be larger than {minSize} KB.

where:

  • {name}: will be replaced by the file name being uploaded
  • {size}: will be replaced by the uploaded file size
  • {minSize}: will be replaced by the minFileSize parameter.

msgSizeTooLarge

string, the message to be displayed when the file size exceeds maximum size set in maxFileSize. Defaults to:

File "{name}" ({size} KB) exceeds maximum allowed upload size of {maxSize} KB. Please retry your upload!

where:

  • {name}: will be replaced by the file name being uploaded
  • {size}: will be replaced by the uploaded file size
  • {maxSize}: will be replaced by the maxFileSize parameter.

msgFilesTooLess

string, message to be displayed when the file count is less than the minimum count as set in minFileCount. Defaults to:

You must select at least {n} {files} to upload. Please retry your upload!

where:

  • {n}: will be replaced by the allowed minimum files as set in minFileCount.
  • {files}: will be replaced with fileSingle or filePlural properties in locale file depending on the minFileCount.

msgFilesTooMany

string, the message to be displayed when the file count exceeds maximum count as set in maxFileCount. Defaults to:

Number of files selected for upload ({n}) exceeds maximum allowed limit of {m}. Please retry your upload!

where:

  • {n}: will be replaced by number of files selected for upload

  • {m}: will be replaced by the allowed maximum files as set in maxFileCount

msgFileNotFound

string, the exception message to be displayed when the file selected is not found by the FileReader. Defaults to:

File "{name}" not found!

where:

  • {name}: will be replaced by the file name being uploaded

msgFileSecured

string, the exception message to be displayed when the file selected is not allowed to be accessed due to a security exception. Defaults to:

Security restrictions prevent reading the file "{name}".

where:

  • {name}: will be replaced by the file name being uploaded

msgFileNotReadable

string, the exception message to be displayed when the file selected is not readable by the FileReader API. Defaults to:

File "{name}" is not readable.

where:

  • {name}: will be replaced by the file name being uploaded

msgFilePreviewAborted

string, the exception message to be displayed when the file preview upload is aborted. Defaults to:

File preview aborted for "{name}".

where:

  • {name}: will be replaced by the file name being uploaded

msgFilePreviewError

string, the exception message to be displayed for any other error when previewing the file. Defaults to:

An error occurred while reading the file "{name}".

where:

  • {name}: will be replaced by the file name being uploaded

msgInvalidFileName

string, the message to be displayed when the slugified file name returns an empty string. Defaults to:

Invalid or unsupported characters in file name "{name}".

where:

  • {name}: will be replaced by the file name being uploaded

msgInvalidFileType

string, the message to be displayed when the file type is not in one of the file types set in allowedFileTypes. Defaults to:

Invalid type for file "{name}". Only "{types}" files are supported.

where:

  • {name}: will be replaced by the file name being uploaded
  • {types}: will be replaced by the comma separated list of types defined in allowedFileTypes.

msgInvalidFileExtension

string, the message to be displayed when the file type is not in one of the file extensions set in allowedFileExtensions. Defaults to:

Invalid extension for file "{name}". Only "{extensions}" files are supported.

where:

  • {name}: will be replaced by the file name being uploaded
  • {extensions}: will be replaced by the comma separated list of extensions defined in allowedFileExtensions.

msgUploadAborted

string, the message to be displayed when an ongoing ajax file upload is aborted by pressing the Cancel button. Defaults to The file upload was aborted. If this is set to null or empty, the internal ajax error message will be displayed.. Defaults to File Upload Error.

msgUploadThreshold

string, the message to be displayed within the progress bar when the progress exceeds the progressUploadThreshold setting. Defaults to Processing....

msgUploadBegin

string, the message to be displayed within the progress bar when the progress is 0% and upload is about to begin. Defaults to Initializing....

msgUploadEnd

string, the message to be displayed within the progress bar when the progress is 100% and upload is completed. Defaults to Done.

msgUploadEmpty

string, the error message displayed when no files or extra data were found to upload or submit. Defaults to No valid data available for upload.

msgValidationError

string, the exception message to be displayed within the caption container (instead of msgFilesSelected), when a validation error is encountered. Defaults to File Upload Error.

msgValidationErrorClass

string, the css class for the validation error message displayed in the caption container. Defaults to text-danger.

msgValidationErrorIcon

string, the icon to be displayed before the validation error in the caption container. Defaults to

msgErrorClass

string, the css class for the error message to be displayed in the preview window when the file size exceeds maxSize. Defaults to file-error-message.

msgLoading

string, the message displayed when the files are getting read and loaded for preview. Defaults to

Loading file {index} of {files} …

The following special variables will be replaced:

  • {index}: the sequence number of the current file being loaded.
  • {files}: the total number of files selected for upload.

msgProgress

string, the progress message displayed as each file is loaded for preview. Defaults to:

Loading file {index} of {files} - {name} - {percent}% completed.

The following variables will be replaced:

  • {index}: the sequence number of the current file being loaded.
  • {files}: the total number of files selected for upload.
  • {percent}: the percentage of file read and loaded.
  • {name}: the name of the current file being loaded.

msgSelected

string, the progress message displayed in caption window when multiple (more than one) files are selected. Defaults to {n} files selected. The following variables will be replaced:

  • {n}: the number of files selected.

msgFoldersNotAllowed

string, the message displayed when a folder has been dragged to the drop zone. Defaults to Drag & drop files only! {n} folder(s) dropped were skipped.. The following variables will be replaced:

  • {n}: the number of folders dropped.

msgImageWidthSmall

string, the exception message to be displayed when the file selected for preview is an image and its width is less than the minImageWidth setting. Defaults to:

Width of image file "{name}" must be at least {size} px.

where:

  • {name}: will be replaced by the file name being uploaded.

  • {size}: will be replaced by the minImageWidth setting.

msgImageHeightSmall

string, the exception message to be displayed when the file selected for preview is an image and its height is less than the minImageHeight setting. Defaults to:

Height of image file "{name}" must be at least {size} px.

where:

  • {name}: will be replaced by the file name being uploaded.

  • {size}: will be replaced by the minImageHeight setting.

msgImageWidthLarge

string, the exception message to be displayed when the file selected for preview is an image and its width exceeds the maxImageWidth setting. Defaults to:

Width of image file "{name}" cannot exceed {size} px.

where:

  • {name}: will be replaced by the file name being uploaded.

  • {size}: will be replaced by the maxImageWidth setting.

msgImageHeightLarge

string, the exception message to be displayed when the file selected for preview is an image and its height exceeds the maxImageHeight setting. Defaults to:

Height of image file "{name}" cannot exceed {size} px. where:

  • {name}: will be replaced by the file name being uploaded.

  • {size}: will be replaced by the maxImageHeight setting.

msgImageResizeError

string, the message to be displayed when an error is received during image resize operation. Defaults to:

Could not get the image dimensions to resize.

msgImageResizeException

string, the message to be displayed when an exception is thrown during image resize operation. Defaults to:

Error while resizing the image.<pre>{errors}</pre>.

where:

  • {errors}: will be replaced by the javascript exception message.

msgAjaxError

string, the message to be displayed when an unknown error or exception is received during any of the ajax operations (e.g. upload or delete). Defaults to:

Something went wrong with the {operation} operation. Please try again later!

where:

  • {operation}: will be replaced by the file operation (see ajaxOperations for list of ajax operations supported by the plugin)

msgAjaxProgressError

string, the message to be displayed in the progress bar when an unknown error or exception is received during any of the ajax operations (e.g. upload or delete). Defaults to:

{operation} failed

where:

  • {operation}: will be replaced by the file operation (see ajaxOperations for list of ajax operations supported by the plugin)

ajaxOperations

object, the user friendly messages displayed for each of the ajax operations (and used in msgAjaxError to display an error specific to an ajax operation. The keys must be one of deleteThumb, uploadThumb, uploadBatch, or , uploadExtra. Defaults to:

{
    deleteThumb: 'file delete',
    uploadThumb: 'file upload',
    uploadBatch: 'batch file upload',
    uploadExtra: 'form data upload'
}

progressClass

string, the upload progress bar CSS class to be applied when AJAX upload is in process (applicable only for ajax uploads). Defaults to progress-bar progress-bar-success progress-bar-striped active.

progressCompleteClass

stringthe upload progress bar CSS class to be applied when AJAX upload is complete. Defaults to progress-bar progress-bar-success.

progressErrorClass

stringthe upload progress bar CSS class to be applied when AJAX upload is cancelled or aborted. Defaults to progress-bar progress-bar-danger.

progressUploadThreshold

int the percentage progress threshold until which the file upload progress indicator will display the percentage. Defaults to 99, beyond which the progress bar will display the msgUploadThreshold.

previewFileType

string, the type of files that are to be displayed in the preview window. Defaults to image. Can be one of the following:

  • image: Only image type files will be shown in preview.
  • text: Only text type files will be shown in preview.
  • any: Both image and text files content will be shown in preview.

Files other than image or text will be displayed as a thumbnail with the filename in the preview window.

zoomIndicator

string, the icon for zooming the file content in a new modal dialog. This is currently applicable only for text file previews. Defaults to

elErrorContainer

string, the identifier for the container element displaying the error (e.g. '#id'). If not set, will default to the container with CSS class kv-fileinput-error inside the preview container (identified by elPreviewContainer). The msgErrorClass will be automatically appended to this container before displaying the error.

elCaptionContainer

string, the identifier for the container element containing the caption (e.g. '#id'). If not set, will default to the container with CSS class file-caption inside the main plugin container.

elCaptionText

string, the identifier for the container element containing the caption text (e.g. '#id'). If not set, will default to the container with CSS class file-caption-name inside the main plugin container.

elPreviewContainer

string, the identifier for the container element containing the preview (e.g. '#id'). If not set, will default to the container with CSS class file-preview inside the main plugin container.

elPreviewImage

string, the identifier for the element containing the preview image thumbnails (e.g. '#id'). If not set, will default to the container with CSS class file-preview-thumbnails inside the main plugin container.

elPreviewStatus

string, the identifier for the element containing the preview progress status (e.g. '#id'). If not set, will default to the container with CSS class file-preview-status inside the main plugin container.

slugCallback

function a callback to convert the filename as a slug string eliminating special characters. If not set, it will use the plugin's own internal slugDefault method. This callback function includes the filename as parameter and must return a converted filename string. This defaults to the following callback:

slugCallback: function (text) {
    return isEmpty(text) ? '' : String(text).replace(/[\-\[\]\/\{}:;#%=\(\)\*\+\?\\\^\$\|<>&"']/g, '_');
}

One can override this to what they want for their use case. For example:

slugCallback: function(filename) {
    return filename.replace('(', '_');
}

dropZoneEnabled

bool whether to enable a drag and drop zone for dragging and dropping files to. This is available only for ajax based uploads. Defaults to true.

dropZoneTitle

string, title to be displayed in the drag and drop zone. This is available only for ajax based uploads. Defaults to Drag & drop files here ….

dropZoneTitleClass

string, CSS class for the drag & drop zone title. Defaults to file-drop-zone-title.

dropZoneClickTitle

string, title to be appended to the dropZoneTitle in the drag and drop zone when browseOnZoneClick is true. This is available only for ajax based uploads. Defaults to
(or click to select {files}).

fileActionSettings

object configuration for setting up file actions for newly selected file thumbnails in the preview window. The following properties can be set: The following properties can be set:

  • showUpload: boolean, whether to show the upload button in the thumbnail

  • showRemove: boolean, whether to show the remove button in the thumbnail

  • showZoom: boolean, whether to show the zoom button in the thumbnail

  • showDrag: boolean, whether to show the drag button in the thumbnail (applicable only for initial preview content)

  • removeIcon: string, icon for remove button to be displayed in each file thumbnail.

  • removeClass: string, CSS class for the remove button in each file thumbnail.

  • removeTitle: string, title for remove button in each file thumbnail.

  • uploadIcon: string, icon for upload button to be displayed in each file thumbnail.

  • uploadClass: string, CSS class for the upload button in each file thumbnail.

  • uploadTitle: string, title for upload button in each file thumbnail.

  • zoomIcon: string, icon for zoom button to be displayed in each file thumbnail (to zoom thumbnail content to a detailed modal preview).

  • zoomClass: string, CSS class for the zoom button in each file thumbnail (to zoom thumbnail content to a detailed modal preview).

  • zoomTitle: string, title for zoom button in each file thumbnail (to zoom thumbnail content to a detailed modal preview).

  • dragIcon: string, icon for drag button to be displayed in each file thumbnail (to sort / rearrange items in initial preview).

  • dragClass: string, CSS class for the drag button in each file thumbnail (to sort / rearrange items in initial preview).

  • dragTitle: string, title for drag button in each file thumbnail (to sort / rearrange items in initial preview).

  • dragSettings: object, the configuration for the Sortable plugin that will allow you to control the drag settings.

  • indicatorNew: string, an indicator (HTML markup) for new pending upload displayed in each file thumbnail.

  • indicatorSuccess: string, an indicator (HTML markup) for successful upload displayed in each file thumbnail.

  • indicatorError: string, an indicator (HTML markup) for error in upload displayed in each file thumbnail.

  • indicatorLoading: string, an indicator (HTML markup) for ongoing upload displayed in each file thumbnail.

  • indicatorNewTitle: string, title to display on hover of indicator for new pending upload in each file thumbnail.

  • indicatorSuccessTitle: string, title to display on hover of indicator for successful in each file thumbnail.

  • indicatorErrorTitle: string, title to display on hover of indicator for error in upload in each file thumbnail.

  • indicatorLoadingTitle: string, title to display on hover of indicator for ongoing upload in each file thumbnail.

Defaults to the following setting:

{
    removeIcon: '<i class="glyphicon glyphicon-trash text-danger"></i>',
    removeClass: 'btn btn-xs btn-default',
    removeTitle: 'Remove file',
    uploadIcon: '<i class="glyphicon glyphicon-upload text-info"></i>',
    uploadClass: 'btn btn-xs btn-default',
    uploadTitle: 'Upload file',
    indicatorNew: '<i class="glyphicon glyphicon-hand-down text-warning"></i>',
    indicatorSuccess: '<i class="glyphicon glyphicon-ok-sign file-icon-large text-success"></i>',
    indicatorError: '<i class="glyphicon glyphicon-exclamation-sign text-danger"></i>',
    indicatorLoading: '<i class="glyphicon glyphicon-hand-up text-muted"></i>',
    indicatorNewTitle: 'Not uploaded yet',
    indicatorSuccessTitle: 'Uploaded',
    indicatorErrorTitle: 'Upload Error',
    indicatorLoadingTitle: 'Uploading ...'
}

otherActionButtons

string, markup for additional action buttons to display within the initial preview thumbnails (for example displaying an image edit button). The following tags can be used in the markup and will be automatically replaced:

  • {dataKey}: Will be replaced with the key set within initialPreviewConfig.

For example, you can set a custom button (or chain/append multiple button markups) like below:

var btns = '<button type="button" class="kv-cust-btn btn btn-xs btn-default" title="Download" data-key="{dataKey}">' +
    '<i class="glyphicon glyphicon-download"></i>' +
    '</button>';
// note the tag/token {dataKey} 
$('#input-id').fileinput({
    otherActionButtons: btns,
    // configure other plugin settings
});

You can write a custom action on the button by parsing the CSS class and/or the data key. For example:

$('.kv-cust-btn').on('click', function() {
    var $btn = $(this), key = $btn.data('key');
    // do some actions based on the key
});

textEncoding

string, the encoding to be used while reading a text file. Applicable only for previewing text files. Defaults to UTF-8.

ajaxSettings

object additional ajax settings to pass to the plugin before submitting the ajax request for upload. Applicable only for ajax uploads. This can be useful to pass additional tokens to headers or one can use it for setting other ajax options for advanced cases. Refer the jQuery ajax documentation for the various settings you can configure.

ajaxDeleteSettings

object additional ajax settings to pass to the plugin before submitting the delete ajax request in each initial preview thumbnail. Applicable only for ajax deletions. This can be useful to pass additional tokens to headers or one can use it for setting other ajax options for advanced cases. Refer the jQuery ajax documentation for the various settings you can configure.

showAjaxErrorDetails

boolean whether to show details of the error stack from the server log when an error is encountered via ajax response. Defaults to true

results matching ""

    No results matching ""