Search code examples
javascriptjqueryajaxfile-uploadjquery-file-upload

jQuery / AJAX - send additional data together with file upload


I am uploading files to the server using jQuery:

 $.ajax({
    url : 'http://www.example.com',
    dataType : 'json',
    cache : false,
    contentType : false,
    processData : false,
    data : formData, // formData is $('#file').prop('files')[0];
    type : 'post',
    success : function(response) {something}
   });

I would like to send additional parameters together with the file. Is it possible? If yes - how?

Thanks!


Solution

  • To send additional parameters, you can just append it to formdata like below:

    var formdata=new FormData();
    formdata.append('simpleFile', $('#file').get('files')[0]); //use get('files')[0]
    formdata.append('someotherparams',someothervalues);//you can append it to formdata with a proper parameter name 
    
    $.ajax({
        url : 'http://www.example.com',
        dataType : 'json',
        cache : false,
        contentType : false,
        processData : false,
        data : formData, //formdata will contain all the other details with a name given to parameters
        type : 'post',
        success : function(response) {something}
    });