Question

I’m basically looking to post and image from an HTML page to an asp.net C# page and then have that data posted to the server.

I’ve found a lot of enterprise-y and webform-y solutions, but is there another way to do it avoiding webforms? I’m not a huge fan of generated HTML. Basically, the pseudocode would be like this.

<script type="text/javascript">
window.onload = function() {
    button.onclick = function() {
        http = new XMLHttpRequest();
        url = "imageuploader.aspx";
        params = <dunno how to post file data. Help?>
        http.open("POST", url, true);
        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        http.onreadystatechange = function () {
                  Test a bunch of stuff to see if image has been uploaded or we're still working on it
            }
    }
 }
 </script>

imageuploader.aspx

<%@ Page language="C#" validateRequest=false %>
<script language="C#" runat="server">
    private void Page_Load (object sender, System.EventArgs e) {
         <no clue what to do here since I've never done file uploading before>
    }
<script>

Answer 1

First of all, XMLHttpRequest does not support file upload. You can use jQuery Form Plugin, the Form Plugin uses a hidden iframe element to help with the task. This is a common technique, but it has inherent limitations. The iframe element is used as the target of the form’s submit operation which means that the server response is written to the iframe.

There are few other options as well,

http://www.phpletter.com/Demo/AjaxFileUpload-Demo/

http://pixelcone.com/jquery/ajax-file-upload-script/

Now, on the server side, Request.Files gives you an access to all posted files in array collection.