Javascript no está cargando datos binarios

Question

Mi función javascript solo carga los archivos de texto correctamente. ¿Alguien puede ayudarme a descubrir cómo hacer que también acepte imágenes, etc.?

function fileUpload(files) { 
    if (!files.length) { 
    fileList.innerHTML = "<p>No files selected!</p>"; 
    } else {  
var list = document.createElement("ul"); 

for (var i = 0; i < files.length; i++) { 

    //Set vars 
    var file = files[i], 
    fileName = file.name, 
    fileSize = file.size, 
    fileData = file.getAsBinary(), 
    boundary = "xxxxxxxxx", 
    uri = "receive.php", 

    //Create file info HTML output 
    li = document.createElement("li"); 
    list.appendChild(li); 
    var info = document.createElement("span"); 
    info.innerHTML = file.name + ": " + file.size + " bytes"; 
    li.appendChild(info); 

    //Start sending file 
    var xhr = new XMLHttpRequest(); 
    xhr.open("POST", uri, true); 
    xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request. 

    xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4) { 
     if ((xhr.status >= 200 && xhr.status <= 200) || xhr.status == 304) { 

     if (xhr.responseText != "") { 
      alert(xhr.responseText); // display response. 
     } 
     } 
    } 
    } 

    var body = "--" + boundary + "\r\n"; 
    body += "Content-Disposition: form-data; name='upload'; filename='" + fileName + "'\r\n"; 
    body += "Content-Type: application/octet-stream\r\n\r\n"; 
    body += fileData + "\r\n"; 
    body += "--" + boundary + "--"; 

    xhr.send(body); 

} 
fileList.appendChild(list); 
return true; 
    } 
} 

Actualización: He encontrado la siguiente función en línea en http://code.google.com/p/html5uploader/ pero no puedo encontrar la manera de aplicarlo a mi función actual. ¿Es xhr.sendAsBinary lo único que cambió?

// Upload image files 
upload = function(file) { 

    // Firefox 3.6, Chrome 6, WebKit 
    if(window.FileReader) { 

     // Once the process of reading file 
     this.loadEnd = function() { 
      bin = reader.result;     
      xhr = new XMLHttpRequest(); 
      xhr.open('POST', targetPHP+'?up=true', true); 
      var boundary = 'xxxxxxxxx'; 
      var body = '--' + boundary + "\r\n"; 
      body += "Content-Disposition: form-data; name='upload'; filename='" + file.name + "'\r\n"; 
      body += "Content-Type: application/octet-stream\r\n\r\n"; 
      body += bin + "\r\n"; 
      body += '--' + boundary + '--';  
      xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' + boundary); 
      // Firefox 3.6 provides a feature sendAsBinary() 
      if(xhr.sendAsBinary != null) { 
       xhr.sendAsBinary(body); 
*snip* 

Answer 1

No es un ejemplo del W3C de enviar una imagen GIF usando multipart/form-data en http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.2:

 
Content-Type: multipart/form-data; boundary=AaB03x 

--AaB03x 
Content-Disposition: form-data; name="submit-name" 

Larry 
--AaB03x 
Content-Disposition: form-data; name="files" 
Content-Type: multipart/mixed; boundary=BbC04y 

--BbC04y 
Content-Disposition: file; filename="file1.txt" 
Content-Type: text/plain 

... contents of file1.txt ... 
--BbC04y 
Content-Disposition: file; filename="file2.gif" 
Content-Type: image/gif 
Content-Transfer-Encoding: binary 

...contents of file2.gif... 
--BbC04y-- 
--AaB03x-- 

Aviso la línea adicional Content-Transfer-Encoding: binary. Intenta agregar eso.

EDIT: Try base 64 codifica los datos del archivo utilizando the Base64 jQuery plugin:

var body = "--" + boundary + "\r\n"; 
    body += "Content-Disposition: form-data; name='upload'; filename='" + fileName + "'\r\n"; 
    body += "Content-Type: application/octet-stream\r\n"; 
    body += "Content-Transfer-Encoding: base64\r\n\r\n"; 
    body += $.base64Encode(fileData) + "\r\n"; 
    body += "--" + boundary + "--";