[ How can I send files along with other field's data to webmethod is asp.net using jquery ajax call? ]

I have a webform which has x number of textboxes and y number of dropdowns etc I am using this code to send data to webmethod at the server:

$.ajax({
    type: "POST",
    url: "SupplierMaster.aspx/RegisterSupplier",
    data: JSON.stringify({
        id: $('#txtbidderid').val(),
        bidamt: $('#txtbidamt').val()
    }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: true,
    success: function (data, status) {
        alert(data.d);
    },
    failure: function (data) {
        alert(data.d);
    },
    error: function (data) {
        alert(data.d);
    }
});

Now the problem is that I also want to include file attachments on this form. How do I add the files to data: of $.ajax method? I do not want to use external plugins etc unless absolutely necessary.

Lets say I modify my data object to look like this :

var dataToSend = {};
dataToSend.id = $('#txtbidderid').val()
dataToSend.bidamt = $('#txtbidamt').val()
dataToSend.append( 'file', input.files[0] );

What would the webmethod armument look like? For example lets suppose it looks like this as of now: [WebMethod] public static string SubmitBid(string id, string bidamt.....)

Answer 1

You can try something like this. You may need to manipulate content type.

var dataToSend = new FormData();    
dataToSend.append( 'file', input.files[0] );

$.ajax({
  url: "SupplierMaster.aspx/RegisterSupplier",
  data: dataToSend,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});

Answer 2

You cannot send file as application/json; charset=utf-8 to the server and so i suggest you to use application/x-www-form-urlencoded as contentType and also data as FormData as below.

            $.ajax({
            url: "SupplierMaster.aspx/RegisterSupplier",
            type: 'POST',
            data: new FormData(formElement),//Give your form element here
            contentType: false,
            processData: false,
            success: function () {
                //do success
            }
        });