使用 jQuery val() 发送表单数据并使用 FormData 发送数据

Question

I tried to send a file using Ajax post request using two methods:

Method 1 ( jQuery val()) -

$.ajax({
url: 'somewhere',
method: 'post',
processData: true,   
contentType: true, 
 
data:{
  'data1':$('#fileinputid').val(),  //file input
}

success:function(){
//do something;
}

error:function(){
//do something;
},

});

Method 2- (FormData)

var formData = new FormData(document.getElementById("form-id"));

$.ajax({
        url: 'somewhere',
        method:'post',
        cache: false,
        processData:false,   
        contentType: false,  

        data: formData,

        success: function(){
         //do something for success            
         },

        error: function(){
         //do something for error
          },

});

Now, Method 2 worked , but Method 1 did not . What is the reason for that?

Answer 1

$('#fileinputid').val() only gets you the file name , you can not upload a file with that.

FormData is capable of creating the whole multipart/formdata request structure that is needed for a file upload.

Answer 2

data1: formData you have a typo here.

It should correctly be data: formData