Przesyłanie danych i plików w jednej formie za pomocą Ajax?

Używam jQuery i Ajax dla moich formularzy do przesyłania danych i plików, ale nie jestem pewien, jak wysłać zarówno dane, jak i pliki w jednej formie?

Obecnie robię prawie to samo z obydwoma metodami, ale sposób, w jaki dane są gromadzone w tablicy, jest inny, dane używają.serialize(); ale pliki używają= new FormData($(this)[0]);

Czy możliwe jest połączenie obu metod, aby móc przesyłać pliki i dane w jednej formie przez Ajax?

Dane jQuery, Ajax i 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>

Pliki jQuery, Ajax i 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>

Jak mogę połączyć powyższe, aby móc wysyłać dane i pliki w jednej formie przez Ajax?

Moim celem jest móc wysłać cały ten formularz w jednym poście z Ajaxem, czy to możliwe?

<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>

questionAnswers(7)

yourAnswerToTheQuestion