jQuery AJAX post with fileupload

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开发者_StackOverflow中文版 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?

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().

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
});