Official document Chinese website
http://bootstrap-fileinput.com/events.html

First, introduce the css and js files of bootstrap fileinput

Note: here is a distinction between synchronous and asynchronous
Synchronous callback takes filebatchuploadsuccess
Asynchronous callback fileuploaded

Configuration item
uploadAsync: false, / / synchronous upload (otherwise asynchronous)

language

String, the language configuration of the plug-in, which can make the display information of the plug-in expressed in the language of your region (you must set the ISO code of your own language). You can display plug-ins in multiple languages on the same page. You must follow the previous Translation part Define the regional language coding JS file as described in. This file must be in fileinput JS.

showCaption

Boolean value, whether to display the file name. The default value is true.

showPreview

Boolean value, whether to display the file preview. The default value is true.

showRemove

Boolean value indicating whether the delete / Clear button is displayed. The default value is true.

showUpload

Boolean value, whether to display the file upload button. The default value is true. It defaults to a form submission button unless the uploadUrl attribute is specified.

showCancel

Boolean value, whether to display the file upload cancel button. The default value is true. It is only enabled and displayed during AJAX upload.

showClose

Boolean value, whether to display the close icon of the preview interface. The default is true. Only when showPreview is true or the {close} tag is used in the preview template will it be resolved.

showUploadedThumbs

Boolean value, whether the thumbnail of the uploaded file (for ajax upload) is continuously displayed in the preview window until the delete / Clear button is pressed. The default value is true. When set to false, the thumbnails of these uploaded files will be cleared from the preview for the next batch of files selected to be uploaded.

showBrowse

Boolean value, whether to display the file browse button. The default is true.

browseOnZoneClick

Boolean value, whether to trigger file browsing / selection when clicking the preview area. The default is false.

autoReplace

Boolean value, whether to automatically replace the files in the preview after the uploaded files reach the maxFileCount limit and some new files are selected. This parameter works if the maxFileCount value is valid. The default is false.

overwriteInitial

Boolean whether to override the initial preview content and title settings. The default is true, so any initialPreview content set will be overwritten when a new file is uploaded or cleared. Setting it to false will help to always display images or files saved from the database, especially when using the multi file upload feature.

uploadurl

Uploaded backend address

allowedFileExtensions

Array is a list of file extensions that can be uploaded. By default, this plug-in is set to NULL, which means that the plug-in supports all file extensions uploaded. If an invalid file extension is found, the validation error message set in msginvalidfileextence is raised. An example of setting this situation can be:

['jpg', 'gif', 'png', 'txt']

maxFileCount

The maximum number of files allowed for multiple uploads at a time. If set to 0, it means that the number of files allowed is unlimited. The default is 0.

minFileCount

The minimum number of files allowed to be uploaded multiple times at a time. If set to 0, it means that the number of files is optional. The default is 0.

msgFilesTooMany

String when the number of files exceeds the maximum count set in maxFileCount. Default to

The selected number of uploaded files {n} exceeds the maximum allowed number

msgFilesTooLess

String that displays a message when the file count is less than the minimum count set in minFileCount. Default to

The selected number of uploaded files {n} is less than the minimum allowed number

Simple example

//Initialize avatar upload plug-in
            $("#portrait").fileinput({
                language: 'zh', //Set language
                elErrorContainer: '#kartik-file-errors',
                allowedFileExtensions: ["jpg", "JPG", "jpeg", "JPEG", "png", "gif"],
                dropZoneEnabled: false,
                maxFileCount: 1,
                uploadAsync: false,//Asynchronous upload
                uploadUrl: "../upload/file/1",//url of image upload
                enctype:'multipart/form-data',
                previewFileIcon: "",
                maxImageWidth: 200,
                resizeImage: false,
                showPreview: false
            }).on("filebatchselected", function (event, data) {//Select upload
                if (data.length == 0) {
                    return;
                }
            }).on('fileuploaded', function (event, data) {//Asynchronous upload successful result processing

            }).on('fileerror', function (event, data, msg) {//Asynchronous upload failure result processing
                console.log(event, data, msg);
            }).on('fileuploaderror', function (event, data, msg) {//Asynchronous upload failure result processing
                console.log(event, data, msg);
            }).on('filebatchuploadsuccess', function(event,data,previewId,index) {//Upload synchronization callback
               
            });;