Skip to content
Kai edited this page Apr 26, 2017 · 2 revisions

方法

这个插件支持如下方法。查看插件各种方法的演示,请点击这里

下面的许多方法支持链式调用其他方法,因为它们将文件输入元素作为jQuery对象返回。

disable

禁用文件输入控件。此方法将文件输入元素作为jQuery对象返回,因此可以链式调用其他方法。

$('#input-id').fileinput('disable');
 
// 链式调用启用输入控件
$('#input-id').fileinput('disable').fileinput('enable');

enable

启用文件输入控件。此方法将文件输入元素作为jQuery对象返回,因此可以链式调用其他方法。

$('#input-id').fileinput('enable');
 
// 链式调用禁用输入控件
$('#input-id').fileinput('enable').fileinput('disable');

reset

重置文件输入控件。此方法将文件输入元素作为jQuery对象返回,可以链式调用其他方法。

$('#input-id').fileinput('reset');
 
// 链式调用
$('#input-id').fileinput('reset').trigger('custom-event');

destroy

销毁文件输入控件并恢复到普通的本地文件输入。此方法将文件输入元素作为jQuery对象返回,因此可以链式调用其他方法。

$('#input-id').fileinput('destroy');
 
// 链式方法
$('#input-id').fileinput('destroy').fileinput('disable');

refresh

根据提供的参数刷新文件输入控件。你可以提供一组控件选项作为参数。此方法将文件输入元素作为jQuery对象返回,因此可以链式调用其他方法。

// 例1(在运行时禁用)
$('#input-id').attr('disabled', 'disabled');
$('#input-id').fileinput('refresh');
 
// 例2(在运行时修改插件参数)example 2 (modify plugin options at runtime)
$('#input-id').fileinput('refresh', {browseLabel: 'Select...', removeLabel: 'Delete'});
 
// 链式方法
$('#input-id').fileinput('refresh', {showCaption: false}).fileinput('disable');

clear

清理文件输入控件。此方法将文件输入元素作为jQuery对象返回,因此可以链式调用其他方法。

$('#input-id').fileinput('clear');
 
// 方法链
$('#input-id').fileinput('clear').fileinput('disable');

upload

触发所选文件的ajax上传。仅适用于uploadUrl已设置的情况。此方法将文件输入元素作为jQuery对象返回,因此可以链式调用其他方法。

$('#input-id').fileinput('upload');
 
// 方法链
$('#input-id').fileinput('upload').fileinput('disable');

cancel

取消正在进行的ajax文件上传。此方法将文件输入元素作为jQuery对象返回,因此可以链式调用其他方法。

$('#input-id').fileinput('cancel');
 
// 方法链
$('#input-id').fileinput('cancel').fileinput('disable');

lock

锁定文件输入控件,禁用除取消按钮(中止正在进行的AJAX请求)之外的所有操作/按钮。(仅适用于ajax上传)此方法将文件输入元素作为jQuery对象返回,因此可以链式调用其他方法。

$('#input-id').fileinput('lock');
 
// 方法链
$('#input-id').fileinput('lock').fileinput('disable');

unlock

通过反转lock动作的结果解锁并重新启动文件输入控件。此方法将文件输入元素作为jQuery对象返回,因此可以链式调用其他方法。

$('#input-id').fileinput('unlock');
 
// 方法链
$('#input-id').fileinput('unlock').fileinput('disable');

addToStack

此方法将文件对象推入(追加)到用来上传的缓存文件堆栈数组。你必须传入一个文件对象作为参数。

$('#input-id').fileinput('addToStack', fileObj); // `fileObj`是文件blob对象实例

updateStack

此方法用指定的数组索引更新/重载一个缓存文件堆栈数组中的文件对象,以指定数组索引。你必须传入数组索引数和文件对象作为参数。

$('#input-id').fileinput('updateStack', index, fileObj); 
// `index`是你要更新/重载的`fileObj`的缓存文件数组索引。

clearStack

此方法清除整个文件上传数组堆栈。

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

getFileStack

这个方法返回已选择选择文件对象数组(只有当uploadurl被设置且进行ajax上传时适用。)这个方法不会返回验证失败或者已经上传的文件。

var files = $('#input-id').fileinput('getFileStack'); // 返回选中的文件队列

如上所述,请注意,此方法仅对于为ajax上传获取文件对象非常有用。对于正常的基于表单的提交,你可以通过直接读取输入值来获取选定的文件。例如$('#input-id').val()

getFilesCount

此方法返回所有待上传的文件和已上传的文件(基于初始预览)的计数。计数将包括从客户端(未上传)中选择的文件加上传到服务器并通过初始预览显示的文件。validateInitialCount将用于检查是否使用初始预览计数。当设置uploadUrl时,此方法将返回正常表单提交以及ajax上传的文件数。

var filesCount = $('#input-id').fileinput('getFilesCount'); // 返回文件(已经上传和等待上传)计数

zoom

放大缩小传入帧ID参数的详细预览内容。

$('#input-id').fileinput('zoom', 'preview-123882'); // 传入缩略图框架的HTML id。

getPreview

返回初始预览内容,初始预览配置和初始预览缩略图标签。作为下列格式的对象(关联数组)返回结果:

{
    content: ['content1', 'content2'],
    config: [
        { 
            // content1 的初始化预览配置
        },
        { 
            // content2 的初始化预览配置
        },
            
    ],
    tags: [
        { 
            // content1 的初始化预览标签
        },
        { 
            // content2 的初始化预览标签
        },
    ]
}

使用范例:

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