使用 Ajax 以一种形式上传数据和文件？

Question

我正在为我的表单使用 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;
});

<form id="data" method="post">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <button>Submit</button>
</form>

文件 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;
});

<form id="files" method="post" enctype="multipart/form-data">
    <input name="image" type="file" />
    <button>Submit</button>
</form>

如何结合以上内容，以便通过 Ajax 以一种形式发送数据和文件？

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

<form id="datafiles" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

原文由 Dan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

您可以 使用 ajax 以一种形式 上传数据和文件。

PHP + HTML

 <?php

 print_r($_POST);
 print_r($_FILES);
 ?>

 <form id="data" method="post" enctype="multipart/form-data">
 <input type="text" name="first" value="Bob" />
 <input type="text" name="middle" value="James" />
 <input type="text" name="last" value="Smith" />
 <input name="image" type="file" />
 <button>Submit</button>
 </form>

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

原文由 Dan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

 function ajax_form($form, on_complete)
{
    var iframe;

    if (!$form.attr('target'))
    {
        //create a unique iframe for the form
        iframe = $("<iframe></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”下

原文由 Roey 发布，翻译遵循 CC BY-SA 3.0 许可协议