Sending file data with ajax form submit

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.

Have strings as your data values.Check this link http://stackoverflow.com/questions/10324594/jquery-illegal-invocation and let me know if you have any problems — WebInsight, Apr 19 '16 at 11:53
Can check this link also http://stackoverflow.com/questions/31459429/sending-a-formdata-object-to-server-with-ajax-contains-files — WebInsight, Apr 19 '16 at 11:57

score 0 · Answer 1 · answered Apr 19 '16 at 12:23

0

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

answered Apr 19 '16 at 12:23

Sending file data with ajax form submit

1 Answers1