Jquery ajax how to upload file and other content in a same time

Question

I'm follow one of the answer found online. But I got error Uncaught TypeError: Illegal invocation during submit. The following is my code. Correct me if I did any wrong. If any other method is better than this please leave a comment.

    var form = $("#frmNew");
    var frmData = new FormData(form);
    
    $.ajax({
        
        url:'/company/create',
        data: frmData,
        dataType: 'html',
        method: 'post',
        contentType: false,
        processType: false.
        success:function(data)
        {
            console.log(data);
        },
        error:function(error,data)
        {
            console.log('error');
        },
        
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/company/create?" method="post" name="frmCreate" id="frmNew" enctype="multipart/form-data" class="ng-pristine ng-valid">
<table style="border-spacing:5px;border-collapse:separate">
                                       
<tbody><tr>
  <th><label for="start_date">Start date</label></th>
  <td><input class="text form-control col-md-4" type="date" name="start_date" id="start_date" style="width:320px !important;height:32px;"></td>
</tr>
<tr>
  <th><label for="end_date">End date</label></th>
  <td><input class="text form-control col-md-4" type="date" name="end_date" id="end_date" style="width:320px !important;height:32px;"></td>
</tr>
<tr>
  <th><label for="skmm_ref_num">Ref. No</label></th>
  <td><input class="text form-control col-md-4" type="text" name="skmm_ref_num" id="skmm_ref_num" style="width:320px !important;height:32px;"></td>
</tr>
<tr>
  <th><label for="upload_file">Upload file</label></th>
  <td><input class="text form-control col-md-4" type="file" name="upload_file" id="upload_file" style="width:320px !important;height:32px;"></td>
</tr>
   
<tr><td><button type="button" class="btn btn-small btn-primary" id="btn-submit">Add</button></td><td><a class="btn btn-small btn-default" href="/company/companyInfo?">Cancel</a></td></tr>
                                                        
                                                    </tbody></table>    
                                                    </form>

Answer 1

Try this in jquery:

var file_data = $('#pic').prop('files')[0];  // pic is the id of input file
var some_value= $('#id').val();

var form_data = new FormData();
form_data.append('file', file_data);
form_data.append('some_value', some_value); // You can add more key -> value here

$.ajax({
        url         : 'upload.php',     // point to server-side PHP script 
        cache       : false,
        contentType : false,
        processData : false,
        data        : form_data,                         
        type        : 'post',
        success     : function(output){
            alert(output);              // display response from the PHP script, if any
        }
 });

Answer 2

You should change method: 'post' to type: 'POST' since there is no parameter method in ajax parameter.

For complete parameter: http://api.jquery.com/jquery.ajax/