Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use bootstrap-fileinput to achieve file upload, the article is very detailed, has a certain reference value, interested friends must read it!

I. preparation

1. First of all, we need to prepare our plug-in. The download address is as follows:

Https://github.com/kartik-v/bootstrap-fileinput/

In the file:

Js: plug-in core js code, we need to refer to fileinput.min.js/fileinput.js. The default plug-in language is English. If you need Chinese, you need to reference js/locales/zh.js (other languages reference the corresponding js file).

Js/plugins: related auxiliary plug-ins, piexif.min.js (resize image plug-in), sortable.js (initialization preview window thumbnail sorting plug-in), purify.js (see the instructions are used to purify the html code, try not to understand the specific description).

Css: plug-in core css code, fileinput.min.css/fileinput.css (core css code, reference any one), fileinput-rtl.min.css/fileinput-rtl.css (select this set of css, the file selection box will be arranged from right to left, that is, select files and other related buttons on the left, file box on the right).

Themes: theme. If you need the plug-in theme style, you can reference the corresponding js and css files under the theme folder.

In addition to the content described above, we can also open the example/index.html in the zip file or visit http://plugins.krajee.com/file-basic-usage-demo to view the example; we can also choose the control code we need according to the code of the example.

2. Code reference

We need to refer to jquery when programming, but also need to be used in combination with bootstrap, that is, the page needs to introduce bootstrap-related js and css files; not only that, we also need to reference the relevant fileinput.js and css, in Chinese, we need to reference js/locales/zh.js;. If sometimes you need theme style, you need to reference js and css in the relevant folder under themes.

Second, use examples

1. Basic usage: by automatically rendering an ordinary input box into a high-end file upload selection box, the code is as follows:

We just need to set class to file.

2. Hide the file preview window

When we set the property: data-show-preview= "false", it is equivalent to initializing the property: showPreview:false

3. Use input attribute and data-** attribute to create a variety of file upload boxes

Here is the code to use the relevant content:

III. Option option description

Attribute name

Attribute type

Description description

Default value

Language

String

For multilingual settings, you need to introduce the corresponding language files under the\ locales folder in advance when using them.

Chinese zh, imported language files must be placed after fileinput.js

'en'

ShowCaption

Boolean

Whether to display a brief introduction of the selected file

True

ShowBrowse

Boolean

Whether to display the browse button

True

ShowPreview

Boolean

Whether to display the preview area

True

ShowRemove

Boolean

Whether to display the remove button

True

ShowUpload

Boolean

Whether to display the upload button

True

ShowCancel

Boolean

Whether to display the cancel button

True

ShowClose:

Boolean

Whether to display the close button

True

ShowUploadedThumbs

Boolean

True

BrowseOnZoneClick

Boolean

False

AutoReplace

Boolean

Whether to automatically replace the current picture. If set to true, select the file again.

The current file is replaced.

False

GenerateFileId

Object

Null

PreviewClass

String

Add class properties for the preview button

''

CaptionClass

String

''

FrameClass

String

'krajee-default'

MainClass

String

'file-caption-main'

MainTemplate

Object

Null

PurifyHtml

Boolean

True

FileSizeGetter

Object

Null

InitialCaption

String

''

InitialPreview

Array/Object

[]

InitialPreviewDelimiter

String

'* $$*'

InitialPreviewAsData

Boolean

False

InitialPreviewFileType

String

'image'

InitialPreviewConfig

Array/Object

[]

InitialPreviewThumbTags

Array/Object

[]

PreviewThumbTags

Object

{}

InitialPreviewShowDelete

Boolean

True

RemoveFromPreviewOnError

Boolean

False

DeleteUrl

String

Request path when deleting a picture

''

DeleteExtraData

Object

Additional parameters passed when deleting a picture

{}

OverwriteInitial

Boolean

True

PreviewZoomButtonIcons

Object

{

Prev:''

Next:''

Toggleheader:''

Fullscreen:''

Borderless:''

Close:''

}

PreviewZoomButtonClasses

Object

{

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

Boolrean

False

PreferIconicZoomPreview

Boolrean

False

AllowedPreviewTypes

Undefined

Undefined

AllowedPreviewMimeTypes

Object

Null

AllowedFileTypes

Object

Received file suffixes, such as ['jpg',' gif', 'png'], will not be restricted if left empty.

Null

AllowedFileExtensions

Object

Null

DefaultPreviewContent

Object

Null

CustomLayoutTags

Object

{}

CustomPreviewTags

Object

{}

PreviewFileIcon

String

''

PreviewFileIconClass

String

'file-other-icon'

PreviewFileIconSettings

Object

{}

PreviewFileExtSettings

Object

{}

ButtonLabelClass

String

'hidden-xs'

BrowseIcon

String

''

BrowseClass

String

'btn btn-primary'

RemoveIcon

String

''

RemoveClass

String

'btn btn-default'

CancelIcon

String

''

CancelClass

String

'btn btn-default'

UploadIcon

String

''

UploadClass

String

'btn btn-default'

UploadUrl

String

Upload file path

Null

UploadAsync

Boolean

Whether it is upload asynchronously

True

UploadExtraData

Additional parameter settings passed when uploading a file

{}

ZoomModalHeight

Number

four hundred and eighty

MinImageWidth

String

The minimum width of the picture

Null

MinImageHeight

String

The minimum height of the picture

Null

MaxImageWidth

String

The maximum width of the picture

Null

MaxImageHeight

String

The maximum height of the picture

Null

ResizeImage

Boolean

False

ResizePreference

String

'width'

ResizeQuality

Number

0.92

ResizeDefaultImageType

String

'image/jpeg'

MinFileSize

Number

Unit is kb, and the minimum size of the uploaded file

0

MaxFileSize

Number

Unit is kb. 0 means that the file size is not limited.

0

ResizeDefaultImageType

Number

25600 (25MB)

MinFileCount

Number

Indicates the minimum number of files uploaded at the same time

0

MaxFileCount

Number

Indicates the maximum number of files allowed to upload at the same time

0

ValidateInitialCount

Boolean

False

MsgValidationErrorClass

String

'text-danger'

MsgValidationErrorIcon

String

''

MsgErrorClass

String

'file-error-message'

ProgressThumbClass

String

"progress-bar progress-bar-success progress-bar-striped active"

RogressClass

String

"progress-bar progress-bar-success progress-bar-striped active"

ProgressCompleteClass

String

"progress-bar progress-bar-success"

ProgressErrorClass

String

"progress-bar progress-bar-danger"

ProgressUploadThreshold

Number

ninety-nine

PreviewFileType

String

Preview file type, built-in ['image',' html', 'text',' video', 'audio',' flash', 'object','other'] and other formats

'image'

ElCaptionContainer

String

Null

ElCaptionText

String

Set title block prompt information

Null

ElPreviewContainer

String

Null

ElPreviewImage

String

Null

ElPreviewStatus

String

Null

ElErrorContainer

String

Null

ErrorCloseButton

String

'×'

SlugCallback

String

No instructions have been found for the time being. Debugging shows that this method will be transferred to this method after the file is selected.

Null

DropZoneEnabled

Boolean

Whether to display the drag area

True

DropZoneTitleClass

String

Drag and drop area class property settings

'file-drop-zone-title'

FileActionSettings

Object

{}

OtherActionButtons

String

''

TextEncoding

String

Encoding settin

'UTF-8'

AjaxSettings

Object

{}

AjaxDeleteSettings

Object

{}

ShowAjaxErrorDetails

Boolean

True

IV. Method description

Method name

Parameters.

Description

Fileerror

Asynchronous upload error result processing

('# uploadfile'). On ('fileerror', function (event, data, msg) {

});

Fileuploaded

Async upload successful result processing

("# uploadfile"). On ("fileuploaded", function (event, data, previewId, index) {

})

Filebatchuploaderror

Processing of error result of synchronous upload

('# uploadfile'). On ('filebatchuploaderror', function (event, data, msg) {

});

Filebatchuploadsuccess

Result processing of synchronous upload success

('# uploadfile'). On ('filepreupload', function (event, data, previewId, index) {

});

Filebatchselected

Select a file post-processing event

("# fileinput"). On ("filebatchselected", function (event, files) {

});

Upload

File upload method

$("# fileinput") .fileinput ("upload")

Fileuploaded

Post-processing method for successful upload

("# fileinput"). On ("fileuploaded", function (event, data, previewId, index) {

});

Filereset

Fileclear

Click X in the upper right corner of the browse box to respond to the event before emptying the file.

("# fileinput"). On ("fileclear", function (event, data, msg) {

});

Filecleared

Click X in the upper right corner of the browse box to clear the file and respond to the event.

("# fileinput"). On ("filecleared", function (event, data, msg) {

});

Fileimageuploaded

The callback event after the picture has been fully loaded in the preview box

The above is all the contents of the article "how to use bootstrap-fileinput to upload files". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.