11. 方法

Methods

The plugin supports the following methods. To view a demonstration of various plugin methods, click here.

Many of the methods below support method chaining because they return the file input element as a jQuery object.

disable

Disable the file input. This method returns the file input element as a jQuery object and can thus be chained with other methods.

$('#input-id').fileinput('disable');
 
// method chaining with enable
$('#input-id').fileinput('disable').fileinput('enable');

enable

Enable the file input. This method returns the file input element as a jQuery object and can thus be chained with other methods.

$('#input-id').fileinput('enable');
 
// method chaining with disable
$('#input-id').fileinput('enable').fileinput('disable');

reset

Reset the file input. This method returns the file input element as a jQuery object and can thus be chained with other methods.

$('#input-id').fileinput('reset');
 
// method chaining
$('#input-id').fileinput('reset').trigger('custom-event');

destroy

Destroys the file input plugin and reverts to a normal native file input. This method returns the file input element as a jQuery object and can thus be chained with other methods.

$('#input-id').fileinput('destroy');
 
// method chaining
$('#input-id').fileinput('destroy').fileinput('disable');

refresh

Refreshes the file input plugin based on options provided. You can supply an array of plugin options as a parameter. This method returns the file input element as a jQuery object and can thus be chained with other methods.

// 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'});
 
// method chaining
$('#input-id').fileinput('refresh', {showCaption: false}).fileinput('disable');

clear

Clear the file input. This method returns the file input element as a jQuery object and can thus be chained with other methods.

$('#input-id').fileinput('clear');
 
// method chaining
$('#input-id').fileinput('clear').fileinput('disable');

upload

Trigger ajax upload of the files that are selected. Applicable only if uploadUrl is set. This method returns the file input element as a jQuery object and can thus be chained with other methods.

$('#input-id').fileinput('upload');
 
// method chaining
$('#input-id').fileinput('upload').fileinput('disable');

cancel

Cancel an ongoing ajax upload of the files. This method returns the file input element as a jQuery object and can thus be chained with other methods.

$('#input-id').fileinput('cancel');
 
// method chaining
$('#input-id').fileinput('cancel').fileinput('disable');

lock

Locks the file input by disabling all actions/buttons except a cancel button to abort ongoing AJAX requests (for ajax uploads only). This method returns the file input element as a jQuery object and can thus be chained with other methods.

$('#input-id').fileinput('lock');
 
// method chaining
$('#input-id').fileinput('lock').fileinput('disable');

unlock

Unlocks and enables the file input back again by reversing the outcome of the lock action. This method returns the file input element as a jQuery object and can thus be chained with other methods.

$('#input-id').fileinput('unlock');
 
// method chaining
$('#input-id').fileinput('unlock').fileinput('disable');

addToStack

This method pushes (appends) a file object to the cached file stack array for upload. You must supply a file object as a parameter.

$('#input-id').fileinput('addToStack', fileObj); // where `fileObj` is the file blob object instance

updateStack

This method updates/overwrites a file object in the cached file stack array for a specified array index. You must supply the array index and the file object as a parameter.

$('#input-id').fileinput('updateStack', index, fileObj); 
// where `index` is the index of the file stack array against which `fileObj` will be updated/stored

clearStack

This method clears the entire file upload array stack.

$('#input-id').fileinput('clearStack');

getFileStack

This method returns the array of file objects selected (applicable only for ajaxUploads when uploadUrl is set). This method will not return files that failed validation error or which have already been uploaded.

var files = $('#input-id').fileinput('getFileStack'); // returns file list selected

As mentioned, note that this method is useful to get file objects only for ajax uploads. For normal form based submission, you can get the files selected by directly reading the input value i.e. $('#input-id').val().

getFilesCount

This method returns the count of all files pending upload and files already uploaded (based on initial preview). The count will include files selected from client (not uploaded) PLUS the files uploaded to server and displayed via initial preview. The validateInitialCount will be used to check if initial preview count will be used. This method will return count of files for both normal form submissions as well as ajaxUploads when uploadUrl is set.d.

var filesCount = $('#input-id').fileinput('getFilesCount'); // returns count of files (uploaded and pending upload)

zoom

Zooms the content in detailed preview for the passed thumbnail frame id parameter.

$('#input-id').fileinput('zoom', 'preview-123882'); // pass the HTML identifier for the thumbnail frame

getPreview

Returns the initial preview content, the initial preview configuration, and initial preview thumb tags. This is returned as an object (associative array) of the following format:

{
    content: ['content1', 'content2'],
    config: [
        { 
            // initial preview config for content1 
        },
        { 
            // initial preview config for content2
        },
            
    ],
    tags: [
        { 
            // initial preview tags for content1 
        },
        { 
            // initial preview tags for content2
        },
    ]
}

Usage example:

console.log($('#input-id').fileinput('getPreview'));