Uploading both data and files in one form using Ajax?

I'm using jQuery and Ajax for my forms to submit data and files but I'm not sure how to send both data and files in one form.

I currently do almost the same with both methods but the way in which the data is gathered into an array is different. The data uses .serialize(); but the files use = new FormData($(this)[0]);.

Is it possible to combine both methods to be able to upload files and data in one form through Ajax?

Data jQuery, Ajax and 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>

Files jQuery, Ajax and 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>
<