jquery - 如何为AjaxUpload动态设置参数？

Question

我创建了一个使用 this library 上传文件的函数如下:

new AjaxUpload($('#addImage'), {
                action: 'SaveDataBank.aspx',
                name: 'uploadimage',
                dataType: 'json',
                params: { clientid: GetSelectedClient() }
                onSubmit: function (file, ext) {
                },
                onComplete: function (file, response) {
                }
            });

我想在打开文件对话框之前执行一些任务。我怎样才能更新上面的代码？

更新:

我想在文件上传时动态传递一个参数。我有一个包含客户端 ID 列表的下拉列表。如果我单击上传按钮，它将打开文件对话框。然后我希望它从下拉列表中传递选定的客户端。目前，它仅传递最初选择的值。

params: { clientid: GetSelectedClient() },

上面的行不能按照我的要求工作。

Answer 1

第一个想法(不起作用)

尝试将单击处理程序绑定(bind)到按钮。如果您不返回 false 或停止传播，它将在点击处理程序完成后触发文件 uploader :

$('#addImage').click(function(){
    // code here
});

new AjaxUpload($('#addImage'), {
                action: 'SaveDataBank.aspx',
                name: 'uploadimage',
                dataType: 'json'
            });

这不起作用，因为 AjaxUpload 库会创建一个输入元素，当您将鼠标悬停在按钮上时，它会将其放置在按钮的顶部。它实际上是您单击的输入元素。

解决办法

绑定(bind)到您实际点击的输入的点击事件。这在页面加载时不存在，因此我们必须使用 jQuery live function :

new AjaxUpload($('#addImage'), {
                action: 'SaveDataBank.aspx',
                name: 'uploadimage',
                dataType: 'json'
            });

$('input[type="file"]').live('click', function(e){
    // code here
});

参见my updated fiddle一个工作示例。

传递动态数据

要随文件上传一起传递动态数据，请在 onSubmit 处理程序中添加 setData 调用:

new AjaxUpload($('#addImage'), {
            action: 'SaveDataBank.aspx',
            name: 'uploadimage',
            dataType: 'json',
            onSubmit: function (file, ext) {
                this.setData({clientid: GetSelectedClient()});
            }
        });

结论

这表明该库使用起来有点尴尬。您没有单击该按钮，因此您不会获得正常的按钮效果(即，当鼠标按下时它会缩进)。任何依赖于按钮事件的 JavaScript 将无法按预期工作。您可以使用上述解决方案，但就我个人而言，我会寻找不同的库。也许the newer one that replaces this ？ Here are a bunch of others和 some more .