I am uploading files to the server using jQuery:

 $.ajax({
    url : '',
    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!

I am uploading files to the server using jQuery:

 $.ajax({
    url : 'http://www.example.',
    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!

• javascript
• jquery
• ajax
• file-upload
• jquery-file-upload

Share Improve this question Follow asked Jun 29, 2015 at 7:37 daryqsyrodaryqsyro 15522 silver badges99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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.',
    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}
});

Try with this,

$( "form" ).on( "submit", function( event ) {
   var formData = $( this ).serialize();
    //$.ajax({}) //remaining code here 
});

You have to serialize the form using the FormData object instead of only sending the file.

var formData = new FormData($("form")[0]);