如何为AjaxUpload动态设置params？

Question

我创建了一个使用此库上传文件的函数,如下所示:

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

第一个想法(哪个不起作用)

尝试将单击处理程序绑定到按钮.如果您没有返回false或停止传播,它将在点击处理程序完成后触发文件上传器:

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

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

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

解决

绑定到您实际单击的输入的单击事件.这在页面加载时不存在,所以我们必须使用jQuery live函数:

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

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

有关工作示例,请参阅我的更新小提琴.

传递动态数据

要将动态数据与文件上载一起传递,setData请在onSubmit处理程序中添加一个调用:

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

结论

这表明该库有点尴尬.您没有单击该按钮,因此您将无法获得正常的按钮效果(即,当鼠标按下时它会缩进).任何依赖于按钮事件的JavaScript都无法按预期工作.你可以使用上面的解决方案,但就个人而言,我会寻找一个不同的库.也许更新的一个取代了这个？这里有一堆其他人和更多.