XHR Level2 with jQuery for file upload

Question

How can I access the raw XHR object from jQuery Ajax? The thing is, the new XMLHttpRequest Level 2 specification provides a sub-property of XHR called upload but apparently

Answer 1

A little modification to DannYOs answer. I made a jQuery plugin that you can call on a file input to make it simpler. You just pass it your upload script, then your success function and then your progress function.

$.fn.upload = function(remote,successFn,progressFn) {
    return this.each(function() {

        var formData = new FormData();
        formData.append($(this).attr("name"), $(this)[0].files[0]);

        $.ajax({
            url: remote,
            type: 'POST',
            xhr: function() {
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload && progressFn){
                    myXhr.upload.addEventListener('progress',progressFn, false);
                }
                return myXhr;
            },
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            complete : function(res) {
                if(successFn) successFn(res);
            }
        });
    });
}

Usage

$(".myFile").upload("upload.php",function(res) {
    console.log("done",res);
},function(progress) {
    console.log("progress", progress);
});