AJAX post multiple data after file upload

Question

I have this code that uploads a file with $_FILES :

$('input[type=file]').change(function() {
    var FilesID = $(this).attr('id');
    alert(FilesID);
    var data = new FormData();

    jQuery.each(jQuery("#" + FilesID)[0].files, function(i, file) {
        data.append('file-'+i, file);
    });

    jQuery.ajax({
        url: 'upload/index.php',
        data: data + '&picid=' + FilesID,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function(data){

            $("#alertspan").text(data);
            document.getElementById("alertbox").style.display = 'block';
            setTimeout(function() {document.getElementById("alertbox").style.display = 'none';},5000);
        }
    });
});

I would like to add POST data on top of the file upload, basically so that in addition to the uploaded file, you have picid equal to the variable FileID .

Answer 1

What about using data.append('picid', FilesID); prior to calling jQuery.ajax() ?

If you're OK with GET instead of POST, just use 'upload/index.php?picid=' + encodeURIComponent(FilesID)