jQuery AJAX post with fileupload

Question

I have a functional page posting data to a Page WebMethod

[WebMethod()]
public static string sayHello(string pTest, string pText)
{
  return pTest + " - " + pText;
}

which I call using this jQuery

$(document).ready(function () {
  $("#sayHelloButton").click(function (event) {
    var name = $('#name').val();
    var text = $('#text').val(); 
    var dataString = JSON.stringify({
      pTest: name,
      pText: text
    }); 

    $.ajax({
      type: "POST",
      url: "page.aspx/sayHello",
      contentType: "application/json; charset=utf-8",
      data: dataString,
      dataType: "json",
      success: AjaxSucceeded,
      error: AjaxFailed,
      beforeSend: AjaxStart,
      complete: AjaxEnd
    });
  });
});

but now it should also be possible to upload a file and here I am a bit lost.

From what I can read in different posts in here it is not possible but please correct me if I am wrong - but I have seen several jQuery plugins which make upload possible, e.g. through a Flash-script, but how will it then be possible to both post data and upload with only one click? Does anyone have any suggestions which upload plugin is best - and how i can succeed in upload and post in one action?

Answer 1

Assuming sayHelloButton is the id of the submission button on the form you are using to upload the file, be sure to add: event.preventDefault(); to your $("#sayHelloButton").click() function or use javascript.void(); on the form to prevent the browser from posting the data using its default behavior. Otherwise, your ajax code will never even execute.

$("#sayHelloButton").click(function (event) {
event.preventDefault();
var name = $('#name').val();
var text = $('#text').val(); 
var dataString = JSON.stringify({
  pTest: name,
  pText: text
}); 

Answer 2

Can't tell for all plugins, but I'm using jQuery Form without any problems. No flash involved, it just creates hidden iframe instead.

Here's a demo.

but how will it then be possible to both post data and upload with only one click
The process is the same as with normal ajax request. You declare a form element, but instead of $('#myform').submit(); do $('#myform').ajaxSubmit().