Question

我使用Malsup的jQuery Form Plugin异步上传文件as per this question。

它适用于上传文件，但我有兴趣发送附加数据和文件（例如上传文件的人的用户名。

有没有办法添加这些额外数据？

以下是用于上传文件的当前代码：

（假设HTML表单中带有<input type=file/>）

的标准id=upload

// site/js/app.js

var app = app || {};

(function($){


})(jQuery);

// prepare the form when the DOM is ready 
$(document).ready(function() { 



         var options =
         { 
            url: 'http://localhost:3000/file_upload',
            dataType: 'json',
            success: function(response, statusText, xhr, form) 
            {
                alert('success!');
            }; 

        $("#upload").ajaxForm(options);

});

Answer 1

在玩了几天之后，我找到了答案。

简而言之，“数据”有一个“选项”属性，其中包含将发送到服务器的所有内容。当使用表单设置为enctype="multipart/form-data"时，它只捕获文件类型输入，忽略其他所有内容。

但是，如果您可以访问其他输入字段的值（听起来像是$！的作业），您可以使用特定的回调函数手动添加额外的数据。

这会使你的jQuery代码看起来像这样：

// site/js/app.js

var app = app || {};

(function($){


})(jQuery);

/*
$('#upload').submit(function()
{

    alert('Handler for .submit() called.');
    return false;

})*/

// prepare the form when the DOM is ready 
$(document).ready(function() { 



         var options =
         { 
            url: 'http://localhost:3000/file_upload',
            dataType: 'json',

            beforeSubmit: function(arr, $form, options) 
            {
                //add additional data that is going to be submit
                //for example
                arr.push({ 'name': 'username',
                           'value': 'Jarrod Dixon'});
            }, 


        }; 

        $("#upload").ajaxForm(options);

});

在我的情况下，我使用express.js作为我的网络服务器，这意味着其他数据在app.post的响应的'param'属性中可用req.param('username')。

即，

app.post('/file_upload', function(req, res) {

    //see if we got the username
    console.log('name = '+ req.param('username'));
    //Jarrod Dixon
});

希望这有助于拯救其他人毫无结果的搜索时间！

使用jQuery Form Plugin上传文件时如何提交其他数据？

1 个答案: