XMLHTTPREQUEST发送文件和参数

12 浏览
0 Comments

XMLHTTPREQUEST发送文件和参数

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

目前我使用的两种方法基本相同,但是收集数组中的数据的方法不同,数据使用.serialize();,但是文件使用= new FormData($(this)[0]);

是否可能将两种方法组合在一起,通过Ajax上传文件和数据在一个表单中?

数据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;
});

 

文件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月22日
0
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”选项卡下,而是“文档”下面。

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