使用AJAX在同一个表单中上传数据和文件？

9 浏览
0 Comments

使用AJAX在同一个表单中上传数据和文件？

我正在使用jQuery和Ajax提交表单数据和文件，但我不确定如何在一个表单中同时发送数据和文件？

目前，我用两种方法几乎相同，但数据聚合到数组中的方式不同，数据使用.serialize();，但文件使用= new FormData($(this)[0]);

是否可能将两种方法结合起来，以便通过Ajax上传文件和数据？

Data jQuery，Ajax和html

$("form#data").submit(function(){
    var formData = $(this).serialize();
    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
    return false;
});

 

Files jQuery，Ajax和html

$("form#files").submit(function(){
    var formData = new FormData($(this)[0]);
    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
    return false;
});

 

我该如何结合以上内容，以便通过Ajax在一个表单中发送数据和文件？

我的目标是能够通过Ajax在一个帖子中发送所有这些表单，这是可能的吗？

 

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

另一种选择是使用iframe并将表单的目标设置为它。

你可以尝试这个（它使用jQuery）：

function ajax_form($form, on_complete)
{
    var iframe;
    if (!$form.attr('target'))
    {
        //create a unique iframe for the form
        iframe = $("").attr('name', 'ajax_form_' + Math.floor(Math.random() * 999999)).hide().appendTo($('body'));
        $form.attr('target', iframe.attr('name'));
    }
    if (on_complete)
    {
        iframe = iframe || $('iframe[name="' + $form.attr('target') + '"]');
        iframe.load(function ()
        {
            //get the server response
            var response = iframe.contents().find('body').text();
            on_complete(response);
        });
    }
}

它在所有浏览器中都很好用，你不需要序列化或准备数据。
一个缺点是你无法监视进度。

另外，至少对于Chrome浏览器，请求不会出现在开发者工具的“xhr”选项卡中，而会出现在“doc”下。

0
0 Comments

我遇到的问题是使用了错误的jQuery标识符。

你可以使用ajax在一个表单中上传数据和文件。

PHP + HTML

jQuery + Ajax

$("form#data").submit(function(e) {
    e.preventDefault();    
    var formData = new FormData(this);
    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

短版本

$("form#data").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);    
    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });
});

0