title: jQuery $.ajax multipart/form-data not FULLY uploading images
body: <p>I have a mobile site that allows users to upload images they take on their devices plus some text they input. Currently it encodes images to base64 but unfortunately it inflates them by about 30%. I thought of optimizing this feature by implementing <code>multipart/form-data</code> method via POST.</p>
  
  <p>The following is how I implemented it. On the server side I have a php script that I'm testing with. It saves the binary data to a file <strong>but it only captures 9 bytes</strong> because the server thinks the data is of type <strong>text/plain</strong> and therefore only <strong>captures the first 9 printable characters</strong>. In this case I'm testing with a PNG file and this is what I get. </p>
  
  <p><img src="https://i.stack.imgur.com/GK1O9.png" alt="PNG uploaded file hexed. Only 9 bytes captured"></p>
  
  <p>Does anybody see anything unusual here to add or remove? It's driving me nuts.</p>
  
  <pre><code>        var boundary = 'boundary' + Math.floor(Math.random() * (new Date().getMilliseconds()) );
  
          var data = "--" + boundary + '\r\n';
              data+= "content-disposition: form-data; name=\"txt\"" + '\r\n';
              data+= "content-type: text/plain" + '\r\n\r\n';
              data+= "Text+data\r\n" + '--' + boundary + '\r\n' ;
              data+= "content-disposition: form-data; name=\"img\"" + '\r\n';
              data+= "content-length: " + (image_length) + '\r\n';
              data+= "content-type: application/octet-stream" + '\r\n\r\n';
          var body_length = image_length + ('\r\n--' + boundary).length + data.length;
              data+= binary_data + '\r\n--' + boundary;
  
          $.ajax({ type : 'POST', url : 'post.test.php?len=' + image_length,
              data : data, contentType: 'multipart/form-data, boundary=' + boundary, contentLength: body_length
          });
  </code></pre>