Ich verwende jQuery und Ajax für meine Formulare, um Daten und Dateien zu senden, bin mir aber nicht sicher, wie ich Daten und Dateien in einem Formular senden soll?

Momentan mache ich mit beiden Methoden fast dasselbe, aber die Art und Weise, wie die Daten in einem Array gesammelt werden, ist von den Daten abhängig.serialize(); aber die dateien verwenden= new FormData($(this)[0]);

Ist es möglich, beide Methoden zu kombinieren, um Dateien und Daten in einer Form über Ajax hochladen zu können?

Daten jQuery, Ajax und 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>

Dateien jQuery, Ajax und 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>

Wie kann ich das Obige kombinieren, damit ich Daten und Dateien in einer Form über Ajax senden kann?

Mein Ziel ist es, in der Lage zu sein, alle diese Formulare in einem Post mit Ajax zu verschicken. 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>Submit</button>
</form>