Reading a file from html to jquery and then uploading it to ajax

Question

I have an input tag in HTML

<input id="fileId" type="file" name="fileId" style="display:none;">

I need to receive this file object in javascript to pass it in back-end through ajax.

I am using below line to get file object.

var fileObject = $('#fileId').prop('files')[0]

I am able to receive the file object with this line of code.

and my ajax code is:

$.ajax({
  type: 'POST',
  url: '/urlname/',
  data: {"file_object": fileObject},
  success: function(data) {
    console.log(data)
 }
});

I am not able to execute the ajax code since it producing Illegal invocation error while parsing the object through the ajax. below is the error trace:

jquery.min.js:2 Uncaught TypeError: Illegal invocation
    at i (jquery.min.js:2)
    at jt (jquery.min.js:2)
    at Function.w.param (jquery.min.js:2)
    at Function.ajax (jquery.min.js:2)
    at HTMLButtonElement.<anonymous> (index.js:36)
    at HTMLButtonElement.dispatch (jquery.min.js:2)
    at HTMLButtonElement.y.handle (jquery.min.js:2)
    i @ jquery.min.js:2
    jt @ jquery.min.js:2
    w.param @ jquery.min.js:2
    ajax @ jquery.min.js:2
    (anonymous) @ index.js:36
    dispatch @ jquery.min.js:2
    y.handle @ jquery.min.js:2

Also, I need to read this file object in Django's views.py.