Error in Sending Form file with form using AJAX

Question

I am trying to submit form using AJAX that contains CSV File. So the idea is sending the form using ajax, process it in different file by generating a table and call back the processed table back into the page.

What i Have is this,

<form id="uploadXls" action="" method="post" enctype="multipart/form-data">       <input id="uploaderFile" type="file" class="file"><br/>       <button type="button" class="btn btn-orange pull-right" name="btnSubmit" id="btnSubmit"><i class="fa fa-download"></i> SHOW FILE CONTENT</button> </form> 

and the JavaScript is,

$("#btnSubmit").click(function(){             $.ajax({                 type: 'POST',                 url: '../../content/maindiv_content/drawing/divpages/process_xls_file.php',                 data: new FormData(this),                 contentType: false,                 cache: false,                 processData: false,                 success: function (response, textStatus, jqXHR) {                   $("#showFileContentTable").html(data);                 }             });         });  

and im getting this kind of error in firebug,

TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement. http://infserver/WeltesTankage/dist/js/jquery-1.10.2.min.js line 4 > eval Line 14 

What am i doing wrong here ? Please help me

Answer 1

Don't pass the files into the constructor, but use append, like:

var formData = new FormData(); formData.append('file', $('input[type=file]')[0].files[0]); data:  formData 

Answer 2

You can use this approach too.

var form = $('form').get(0);  

this code returns a jQuery object($('form')) and pass a HTML element to FormData (get(0)).

then in ajax request: data: new FormData(form),