Wie kann ich mit Ajax Daten und Dateien gleichzeitig hochladen?

Question

Ich verwende jQuery und Ajax, um Daten und Dateien zu übermitteln, bin mir aber nicht sicher, wie ich sowohl Daten als auch Dateien in einem Formular senden soll?

Ich verwende derzeit beide Methoden fast auf die gleiche Weise, aber die Art und Weise, die Daten in einem Array zu sammeln, ist unterschiedlich, Daten verwenden .serialize(); und Dateien verwenden ;= new FormData($(this)[0]);

Ist es möglich, diese beiden Methoden zu kombinieren, um Dateien und Daten in einem Formular über Ajax hochzuladen?

Daten jQuery, Ajax und HTML

$("form#data").submit(function(){

    var formData = $(this).serialize();

    $.ajax({
        URL: window.location.pathname,
        Typ: 'POST',
        Daten: formData,
        asynchron: falsch,
        Erfolg: Funktion (Daten) {
            Warnung(Daten)
        },
        Cache: falsch,
        Inhaltstyp: falsch,
        Prozessdaten: falsch
    });

    falsch zurückgeben;
});

<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>Senden</button>
</form>

Dokumentation jQuery, Ajax und HTML

$("form#files").submit(function(){

    var formData = new FormData($(this)[0]);

    $.ajax({
        URL: window.location.pathname,
        Typ: 'POST',
        Daten: formData,
        asynchron: falsch,
        Erfolg: Funktion (Daten) {
            Warnung(Daten)
        },
        Cache: falsch,
        Inhaltstyp: falsch,
        Prozessdaten: falsch
    });

    falsch zurückgeben;
});

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

Wie kann ich das oben Genannte kombinieren, damit ich Daten und Dateien in einem Formular über Ajax senden kann?

Mein Ziel ist es, alle diese Formulare gemeinsam über Ajax versenden zu können. Ist das möglich?

<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>提交</button>
</form>

Answer 1

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

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

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

    if (!$form.attr('target'))
    {
        //为表单创建一个唯一的iframe
        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 ()
        {
            //获取服务器响应
            var response = iframe.contents().find('body').text();
            on_complete(response);
        });
    }
}

它适用于所有浏览器，您不需要序列化或准备数据。 一个缺点是您无法监视进度。

此外，至少对于Chrome来说，请求不会出现在开发者工具的“xhr”选项卡下，而是出现在“doc”下。

Answer 2

我遇到的问题是使用了错误的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>提交</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);
    });
});