代码拉取完成，页面将自动刷新
An enhanced HTML 5 file input for Bootstrap 3.x with file preview for various files, offers multiple selection, and more. This plugin is inspired by this blog article and Jasny's File Input plugin. The plugin enhances these concepts and simplifies the widget initialization with simple HTML markup on a file input. It offers support for previewing a wide variety of files i.e. images, text, html, video, audio, flash, and objects.
NOTE: The latest version of the plugin v2.6.0 has been released. Refer the CHANGE LOG for details.
type = file to an advanced file picker input if you set its class = file. All options to the input can be passed as HTML5 data attributes.initialPreview
and initialCaption properties in the plugin options
section for configuring this.filereset, fileclear, filecleared, fileloaded, and fileerror.Note: There are BC Breaking Changes with release v2.4.0.
With release v2.4.0, the plugin has been revamped to support and configure a wide variety of file formats for preview. This may break some backward compatibility (BC) for older versions that use custom templates.
The following are the major changes with release v2.4.0:
image, text, html, video, audio, flash, object, and other.allowedPreviewTypes: You can now configure which all file types are allowed to be shown as a preview. This defaults to ['image', 'html', 'text', 'video', 'audio', 'flash', 'object'].
Thus all file types are treated as an object to preview by default. For exampleTo preview only image and video, you can set this to ['image', 'video'].allowedPreviewMimeTypes: In addition to allowedPreviewTypes, you can also control which all mime types can be displayed for preview. This defaults to null,
meaning all mime types are supported.
NOTE: With release 2.5.0 you can now control which file types or extensions are allowed for upload by setting
allowedFileTypesandallowedFileExtensions.
layoutTemplates: Allows you to configure all layout template settings within one property. The layout objects that can be configured are: main1, main2,
preview, caption, and modal.previewTemplates: All preview templates for each preview type have been combined into one property, instead of separate templates for image, text etc.
The keys are the formats as set in allowedPreviewTypes and values are the templates used for previewing. There are default prebuilt templates for each
preview file type (generic, image, text, html, video, audio, flash, object, and other). The generic template is used only for displaying
initialPreview content using direct markup.previewSettings: Allows you to configure width and height for each preview image type. The plugin has default widths and heights predefined for each type i.e
image, text, html, video, audio, flash, and object.fileTypeSettings: Allows you to configure and identify each preview file type using a callback. The plugin has default callbacks predefined to identify each type i.e
image, text, html, video, audio, flash, and object.NOTE: Flash preview will require Shockwave flash to be installed and supported by the client browser. The flash preview currently works successfully with webkit browsers only. Video & Audio formats are however supported by all modern browsers that support the HTML5
video/audiotags. Note that browsers have limited number of video/audio formats supported by the HTML5 video element (e.g. mp4, webm, ogg, mp3, wav). The size of video files are recommended to be small (to be controlled throughmaxFileSizeproperty) so that it does not affect the preview performance. You can copy a few files from theexamplesdirectory of this plugin repo, to test a few examples of flash and video files.
View the plugin documentation and plugin demos at Krajee JQuery plugins.
The plugin supports only file input and preview at client level. It does not actually process the upload of the files to the server.
You can use the bower package manager to install. Run:
bower install bootstrap-fileinput
You can use the composer package manager to install. Either run:
$ php composer.phar require kartik-v/bootstrap-fileinput "dev-master"
or add:
"kartik-v/bootstrap-fileinput": "dev-master"
to your composer.json file
You can also manually install the plugin easily to your project. Just download the source ZIP or TAR ball and extract the plugin assets (css and js folders) into your project.
Step 1: Load the following assets in your header.
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js" type="text/javascript"></script>
If you noticed, you need to load the jquery.min.js and bootstrap.min.css in addition to the fileinput.min.css and fileinput.min.js.
Step 2: Initialize the plugin on your page. For example,
// initialize with defaults
$("#input-id").fileinput();
// with plugin options
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});
The #input-id is the identifier for the input (e.g. type = file) on your page, which is hidden automatically by the plugin.
Alternatively, you can directly call the plugin options by setting data attributes to your input field.
<input id="input-id" type="file" class="file" data-preview-file-type="text" >
The plugin supports these following options:
boolean whether to display the file caption. Defaults to true.
boolean whether to display the file preview. Defaults to true.
boolean whether to display the file remove/clear button. Defaults to true.
boolean whether to display the file upload button. Defaults to true. This will default to a form submit button, unless the uploadUrl is specified.
string any additional CSS class to append to the caption container.
string any additional CSS class to append to the preview container.
string any additional CSS class to append to the main plugin container.
string, the delimiter to be used to allow passing multiple content delimited as a string to initialPreview. Defaults to '*$$*'.
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:
file-preview-imagefile-preview-textfile-preview-otherExamples 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>"
int, the count of initial preview items that will be added to the count of files selected in preview. This is applicable when displaying
the right caption, when overwriteInitial is set to false.
string the initial preview caption text to be displayed. If you do not set a value here and initialPreview is set to
true this will default to "{preview-file-count} files selected", where {preview-file-count} is the count of the
files passed in initialPreview.
boolean whether you wish to overwrite the initial preview content and caption setup. This defaults to true, whereby, any initialPreview content set
will be overwritten, when new file is uploaded or when files are cleared. Setting it to false will help displaying a saved image or file from database always -
useful especially when using the multiple file upload feature.
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.caption: the template for rendering the caption.modal: the template for rendering the modal (for text file preview zooming).The main1 and main2 templates would automatically parse the following tags for replacement:
{class}: the CSS class as set in the mainClass property.{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.{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.{browse}: the main file browse button to select your files for input.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="input-group {class}">\n' +
' {caption}\n' +
' <div class="input-group-btn">\n' +
' {remove}\n' +
' {upload}\n' +
' {browse}\n' +
' </div>\n' +
'</div>',
main2: '{preview}\n{remove}\n{upload}\n{browse}\n',
preview: '<div class="file-preview {class}">\n' +
' <div class="close fileinput-remove text-right">×</div>\n' +
' <div class="file-preview-thumbnails"></div>\n' +
' <div class="clearfix"></div>' +
' <div class="file-preview-status text-center text-success"></div>\n' +
'</div>',
caption: '<div tabindex="-1" class="form-control file-caption {class}">\n' +
' <span class="glyphicon glyphicon-file kv-caption-icon"></span><div class="file-caption-name"></div>\n' +
'</div>',
modal: '<div id="{id}" class="modal fade">\n' +
' <div class="modal-dialog modal-lg">\n' +
' <div class="modal-content">\n' +
' <div class="modal-header">\n' +
' <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>\n' +
' <h3 class="modal-title">Detailed Preview <small>{title}</small></h3>\n' +
' </div>\n' +
' <div class="modal-body">\n' +
' <textarea class="form-control" style="font-family:Monaco,Consolas,monospace; height: {height}px;" readonly>{body}</textarea>\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
'</div>\n'
};
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:
{previewId}: will be replaced with the generated identifier for the preview frame container.{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.As noted, if you are coming from an earlier release (before v2.4.0), all preview templates have now been combined into one property, instead of separate templates for image, text etc.
The previewTemplates if not set will default to:
{
generic: '<div class="file-preview-frame" id="{previewId}">\n' +
' {content}\n' +
'</div>\n',
html: '<div class="file-preview-frame" id="{previewId}">\n' +
' <object data="{data}" type="{type}" width="{width}" height="{height}">\n' +
' ' + DEFAULT_PREVIEW + '\n' +
' </object>\n' + PREVIEW_LABEL +
'</div>',
image: '<div class="file-preview-frame" id="{previewId}">\n' +
' <img src="{data}" class="file-preview-image" title="{caption}" alt="{caption}" ' + STYLE_SETTING + '>\n' +
'</div>\n',
text: '<div class="file-preview-frame" id="{previewId}">\n' +
' <div class="file-preview-text" title="{caption}" ' + STYLE_SETTING + '>\n' +
' {data}\n' +
' </div>\n' +
'</div>\n',
video: '<div class="file-preview-frame" id="{previewId}" title="{caption}" ' + STYLE_SETTING + '>\n' +
' <video width="{width}" height="{height}" controls>\n' +
' <source src="{data}" type="{type}">\n' +
' ' + DEFAULT_PREVIEW + '\n' +
' </video>\n' + PREVIEW_LABEL +
'</div>\n',
audio: '<div class="file-preview-frame" id="{previewId}" title="{caption}" ' + STYLE_SETTING + '>\n' +
' <audio controls>\n' +
' <source src="{data}" type="{type}">\n' +
' ' + DEFAULT_PREVIEW + '\n' +
' </audio>\n' + PREVIEW_LABEL +
'</div>\n',
flash: '<div class="file-preview-frame" id="{previewId}" title="{caption}" ' + STYLE_SETTING + '>\n' +
' <object type="application/x-shockwave-flash" width="{width}" height="{height}" data="{data}">\n' +
OBJECT_PARAMS + ' ' + DEFAULT_PREVIEW + '\n' +
' </object>\n' + PREVIEW_LABEL +
'</div>\n',
object: '<div class="file-preview-frame" id="{previewId}" title="{caption}" ' + STYLE_SETTING + '>\n' +
' <object data="{data}" type="{type}" width="{width}" height="{height}">\n' +
' <param name="movie" value="{caption}" />\n' +
OBJECT_PARAMS + ' ' + DEFAULT_PREVIEW + '\n' +
' </object>\n' + PREVIEW_LABEL +
'</div>',
other: '<div class="file-preview-frame" id="{previewId}" title="{caption}" ' + STYLE_SETTING + '>\n' +
' ' + DEFAULT_PREVIEW + '\n' + PREVIEW_LABEL +
'</div>',
}
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']
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
allowedFileTypesandallowedFileExtensions. In this case, theallowedFileTypesproperty is validated first and generally precedes theallowedFileExtensionssetting (and the latter validation maybe skipped).
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.
This is by default setup as following:
['image', 'html', 'text', 'video', 'audio', 'flash', 'object']
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.
object the format settings (width and height) for rendering each preview file type. This is by default setup as following:
{
image: {width: "auto", height: "160px"},
html: {width: "320px", height: "180px"},
text: {width: "160px", height: "160px"},
video: {width: "320px", height: "240px"},
audio: {width: "320px", height: "80px"},
flash: {width: "320px", height: "240px"},
object: {width: "320px", height: "300px"},
other: {width: "160px", height: "120px"}
}
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;
},
}
string the label to display for the file picker/browse button. Defaults to Browse ….
string the icon to display before the label for the file picker/browse button. Defaults to <i class="glyphicon glyphicon-folder-open"></i> .
string the CSS class for the file picker/browse button. Defaults to btn btn-primary.
string the label to display for the file remove button. Defaults to Remove.
string the icon to display before the label for the file picker/remove button. Defaults to <i class="glyphicon glyphicon-ban-circle"></i> .
string the CSS class for the file remove button. Defaults to btn btn-default.
string the label to display for the file upload button. Defaults to Upload.
string the icon to display before the label for the file upload button. Defaults to <i class="glyphicon glyphicon-upload"></i> .
string the CSS class for the file upload button. Defaults to btn btn-default.
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.
float the maximum file size for upload in KB. If set to 0, it means size allowed is unlimited. Defaults to 0.
float 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.
string the message to be displayed when the file size exceeds maximum size. Defaults to:
File "{name}" (<b>{size} KB</b>) exceeds maximum allowed upload size of <b>{maxSize} KB</b>. 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.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 <b>({n})</b> exceeds maximum allowed limit of <b>{m}</b>. 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 maxFileCountstring 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 uploadedstring 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 uploadedstring 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 uploadedstring 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 uploadedstring 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.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.string the exception message to be displayed within the caption container (instead of msgFilesSelected),
when a validation error is encountered. Defaults to:
<span class="text-danger"><i class="glyphicon glyphicon-exclamation-sign"></i> File Upload Error</span>
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.
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.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.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.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.
integer the number of characters after which the content will be stripped/wrapped for text preview. Defaults to 250.
string the type of files that are to be displayed in the preview window. Defaults to <span class="wrap-indicator" title="{title}">[…]</span>. The following variables will be replaced:
{title}: the content of the entire text file that will be displayed as a span title element.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.
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.
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.
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.
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.
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.
The plugin supports these events:
This event is triggered when the file input the remove button is pressed for clearing the file preview.
Example:
$('#input-id').on('fileclear', function(event) {
console.log("fileclear");
});
This event is triggered after the files in the preview are cleared.
Example:
$('#input-id').on('filecleared', function(event) {
console.log("filecleared");
});
This event is triggered when a client validation error is encountered for an uploaded file. Additional parameters available are:
file: the FileReader instancepreviewId: the identifier for the preview file container.index: the zero-based sequential index of the loaded file in the preview listExample:
$('#input-id').on('fileerror', function(event, file, previewId, index) {
console.log("fileerror");
});
This event is triggered after a file is loaded in the preview. Additional parameters available are:
file: the FileReader instancepreviewId: the identifier for the preview file container.index: the zero-based sequential index of the loaded file in the preview listExample:
$('#input-id').on('fileloaded', function(event, file, previewId, index) {
console.log("fileloaded");
});
This event is triggered when the file input is reset to initial value.
Example:
$('#input-id').on('filereset', function(event) {
console.log("filereset");
});
The plugin supports these methods:
Disable the file input.
$('#input-id').fileinput('disable');
Enable the file input.
$('#input-id').fileinput('enable');
Reset the file input.
$('#input-id').fileinput('reset');
Clear the file input.
$('#input-id').fileinput('clear');
Refreshes the file input plugin based on options provided. You can supply an array of plugin options as a parameter.
// example 1 (disable at runtime)
$('#input-id').attr('disabled', 'disabled');
$('#input-id').fileinput('refresh');
// example 2 (modify plugin options at runtime)
$('#input-id').fileinput('refresh', {browseLabel: 'Select...', removeLabel: 'Delete'});
bootstrap-fileinput is released under the BSD 3-Clause License. See the bundled LICENSE.md for details.
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手