upload jQuery ajax w/ extra data object

Question

Using the answer from here I can successfully upload images to php.

$(document).ready(function (e) {
$('#imageUploadForm').on('submit',(function(e) {
    e.preventDefault();
    var formData = new FormData(this);

    $.ajax({
        type:'POST',
        url: $(this).attr('action'),
        data:formData, // << i would like to send more object variables
        cache:false,
        contentType: false,
        processData: false,
        success:function(data){
            console.log("success");
            console.log(data);
        },
        error: function(data){
            console.log("error");
            console.log(data);
        }
    });
}));

$("#ImageBrowse").on("change", function() {
    $("#imageUploadForm").submit();
});

});

Question: using this, how can i send extra post data objects to php?
Normally I can send data objects like var dataObj = {a1:a1,a2:a2} and this would replace formData from above.
But since formData occupies the data entry i cant seem to append more $_POST objects to PHP.

Answer 1

You can append more data to a formData object with append()

$('#imageUploadForm').on('submit',(function(e) {
    e.preventDefault();
    var formData = new FormData(this);

    formData.append('key', 'value');

    $.ajax({
        ...
    });
}));