Send image and more info using AJAX to Servlet

Bonjour,

I need to send an image from an element <input type="file">

to a servlet. currently using ajax

var files;
$("input[type='file']").on("change",function(e) {
        files = e.target.files;
        $("#Submit-Button").prop({"disabled":false});
});

$("#Submit-Button").on("click", function(){

        var data = new FormData();
        $.each(files, function(key, value){
            data.append(key, value);
        });

        $.ajax({
            url: "UploadServlet",
            type : "POST",
            data: data,
            cache: false,
            dataType: JSON,
            processData : false,
            contentType: false,
            success: function(data, textStatus, jqXHR){
                //SUCCESS
            },
            error: function(jqXHR, textStatus, errorThrown){
                    //ERROR
            }
        });
    })
});

      

        
        
        
      

    

This works and my servlet gets the file.

However, I want to send additional information to the servlet.

I tried (in js ajax method)

data : {data: data, userID : userID, username: username},

      

        
        
        
      

    

and (in servo Java)

String Filename = request.getParameter("uid") + request.getParameter("username")+".png";
Collection<Part> Parts = request.getParts();

      

        
        
        
      

    

which obviously doesn't work.

And now I cannot think of anything that could solve my problem.