如何为AjaxUpload动态设置params？

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

第一个想法（哪个不起作用）

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

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

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

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

解决方法

绑定到实际点击的输入的click事件。这在页面加载时不存在，因此我们必须使用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。

传递动态数据

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

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。

Answer 2

尝试：

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

或者

$('#addImage').bind('mousedown',function(){
    //code here
});

Answer 3

根据documentation，以下内容适合您：

onSubmit : function(id, fileName){
    var delete=$("#check-delete-previous").is(":checked");
    this.setParams({ "deletePrevious" : delete });
},

确保您使用的是最新版本，因为旧版本可能无法正确设置回调功能。

编辑： 事实上，以下只为我工作：

onSubmit : function(id, fileName){
    var delete=$("#check-delete-previous").is(":checked");
    this.params.deletePrevious = delete;
},

Answer 4

首先，您可以设置一个全局对象：

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

然后，您可以通过AjaxUploadObj._settings

更改属性的值

例如： AjaxUploadObj._setting.action = “http://mustrank.com/dosomething.php”