使用ajax表单提交发送文件数据

Question

I have got issue sending file to a server with ajax for submitting. I tried lots of methods with var xhr = new XMLHttpRequest(); and $.ajax({}); but always its gives error Uncaught TypeError: Illegal invocation . I also use processData: false , but in this condition I got all form fields apart file field.

My Code for ajax is:

var fd = new FormData();
fd.append( 'file', $('#file')[0].files[0] );
fd.append( 'name', 'test');
$.ajax({
    url: "uploadFile.php",
    data: fd,
    cache: false,
    contentType: false,
    // processData: false,
    type: 'POST',
    success: function(data, textStatus, jqXHR){
        console.log('success');
    },
    error: function(jqXHR, textStatus, errorThrown){
        console.log('error');
    }
});

In this I got only name field with value test in output, but not file . Somebody please let me know where I am wrong.

Answer 1

Set contentType to specific format instead of false. For eg. in case of image set it to :- "image/jpeg" etc.