title: HTTP Request Boundaries JavaScript
body: <p>I'm wondering how to handle binary data in boundaries... Right now my code is submitting raw data, but I'm not sure how to wrap it to be seen by my C#.</p>
  
  <p>Here's my current code...</p>
  
  <pre><code>/*global window, document, XMLHttpRequest, FormData, FileReader, Uint8Array, alert, BlobBuilder, navigator */
  
  
  function sendForm(filefield) {
  "use strict";
  var reader, filedata, bb, xhr, blobber;
  filedata = document.getElementById(filefield).files[0];
  reader = new FileReader();
  reader.onloadend = function (evt) {
      if (evt.readyState === FileReader.Done) {
          if (navigator.userAgent.indexOf("Chrom") !== -1) {
              bb = new window.WebKitBlobBuilder();
          } else if (navigator.userAgent.indexOf("Firefox") !== -1) {
              bb = new window.MozBlobBuilder();
          } else {
              bb = new BlobBuilder();
          }
          bb.append(reader.result);
          blobber = bb.getBlob();
          xhr = new XMLHttpRequest();
          xhr.open("POST", "imageprocessor.aspx", true);
          xhr.setRequestHeader("Content-type", "image/png");
          xhr.setRequestHeader("Content-length", reader.length);
          xhr.send(blobber);
      }
  };
  reader.readAsArrayBuffer(filedata);
  }
  
  
  window.onload = function () {
  "use strict";
  document.getElementById("sender").onclick = function () {
      sendForm("file");
  };
  };
  </code></pre>
  
  <p>My html...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-type" content="text/html;charset=UTF-8" /&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;script src="fileuploader.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div&gt;
          &lt;input type="file" name="file" id="file" /&gt;
      &lt;/div&gt;
      &lt;div&gt;&lt;input type="button" value="送る" id="sender" /&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my C#...</p>
  
  <pre><code>&lt;%@ Page language="C#" validateRequest=false %&gt;
  &lt;%@ Import Namespace="System.IO" %&gt;
  &lt;%@ Import Namespace="System.Text" %&gt;
  &lt;%@ Import Namespace="System.Threading" %&gt;
  &lt;script language="C#" runat="server"&gt;
  
  private void Page_Load (object sender, System.EventArgs e)
  {
  int loop1;
  HttpFileCollection Files;
  
  Files = Request.Files; // Load File collection into HttpFileCollection variable.
  Response.Write(Files.Count);
  //  arr1 = Files.AllKeys;  // This will get names of all files into a string array.
  //  for (loop1 = 0; loop1 &lt; arr1.Length; loop1++)
  //  {
  //      Response.Write("File: " + Server.HtmlEncode(arr1[loop1]) + "&lt;br /&gt;");
  //      Response.Write("  size = " + Files[loop1].ContentLength + "&lt;br /&gt;");
  //      Response.Write("  content type = " + Files[loop1].ContentType + "&lt;br /&gt;");
  //  }
  
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The basic workflow is:</p>
  
  <p>"User submits image, stuff happens while image is being uploaded (updating progress bar or something), image is posted to processing page, page saves image to its own file, source page displays that it's done"</p>