提交文件异步扩展


有时你会希望在将文件提交到上传服务器之前通过 AJAX 请求异步处理额外的参数。

重写 add 回调


一种方式是重写插件默认的 add 回调,为其传入 data 参数,将需要处理的数据设为 formData 对象,最后调用 submit() 方法。

$('#fileupload').fileupload({
    add: function (e, data) {
        $.getJSON('/example/url', function (result) {
            data.formData = result; // e.g. {id: 123}
            data.submit();
        });
    } 
});

插件的 UI 版本就是用这种方式进行模板渲染的,其在单击“开始”按钮后调用 data.submit()

如果你既想覆盖 add 回调,但又想保留 UI 版本 add 回调的功能,你可以使用 UI widget 的 protorype 属性:

$('#fileupload').fileupload({
    add: function (e, data) {
        var that = this;
        $.getJSON('/example/url', function (result) {
            data.formData = result; // e.g. {id: 123}
            $.blueimp.fileupload.prototype
                .options.add.call(that, e, data);
        });
    } 
});

然而,这也意味着 upload 模板在你的 AJAX 调用 return 之前不会进行渲染。

使用配置项 submit 回调


另一种方式是使用配置项中的 submit 回调。这种方式支持你既可以渲染 upload 模板,而且只有在实际要提交文件的时候才处理附加的数据:

$('#fileupload').fileupload({
    submit: function (e, data) {
        var $this = $(this);
        $.getJSON('/example/url', function (result) {
            data.formData = result; // e.g. {id: 123}
            data.jqXHR = $this.fileupload('send', data);
        });
        return false;
    } 
});

submit 回调中 return false 是为了防止表单提前给提交了(参见配置项手册)。在处理完附加参数之后,表单会通过手动执行 send API 进行提交。