XMLHttpRequest POST

I need to upload and save an image onto the server. I am using an XMLHttpRequest POST to send the image to the serve开发者_Go百科r and calling a class named imageSave.aspx. I am finding difficulty in "catching" the image from server side (imageSave.aspx) and saving it onto the server. Does anyone please have some tips as to how this is done or maybe link to a good article or something?

Code used to perform the http POST....

    xhr = new XMLHttpRequest();

                // Update progress bar etc
                xhr.upload.addEventListener("progress", function(evt) {
    if (evt.lengthComputable) {
    progressBar.style.width = (evt.loaded / evt.total) * 100 + "%";
    }
    else {
    // No data to calculate on
    }
    }, false);

    // File uploaded
    xhr.addEventListener("load", function() {
    progressBarContainer.className += " uploaded";
    progressBar.innerHTML = "Uploaded!";
    }, false);

    xhr.open("post", "imageSave.aspx", true);

    // Set appropriate headers
               xhr.setRequestHeader("Content-Type", "multipart/form-data");
       xhr.setRequestHeader("X-File-Name", file.fileName);
       xhr.setRequestHeader("X-File-Size", file.fileSize);
       xhr.setRequestHeader("X-File-Type", file.type);

       // Send the file
       xhr.send(file);

Much appreciated, JP

Read this other answer:

• What data formats can AJAX transfer?

It'll get you an idea of why you can't upload an image using XMLHttpRequest.

UPDATE: Check this control of AJAX Control Toolkit - it'd be what you want! - :

• http://www.asp.net/ajax/ajaxcontroltoolkit/samples/asyncfileupload/asyncfileupload.aspx