API de archivos HTML5 readAsBinaryString lee archivos mucho más grandes, diferentes a los archivos en el disco

Question

Código completo en https://gist.github.com/992562.

Estoy usando HTML File API y arrastro/sollo para subir archivos a través de una publicación de XHR a un script PHP. Procesalmente, todo parece funcionar bien, sin embargo, cuando intento abrir los archivos cargados, cualquier archivo que no sea de texto es mucho más grande que el archivo fuente y no se abrirá. Claramente no es la misma información que estaba en el disco de origen. Sin embargo, los archivos de texto son exactamente iguales y están bien abiertos.

Algunos ejemplos de un lastre 3-archivo/soltar Carga: archivo 1: text/xml: en el disco 13 KB, subido 13 KB, funciona perfectamente archivo 2: image/png: en el disco 14 KB, subido 18 KB, no abrirá el archivo 3: application/XLSX: en el disco 12 KB, cargó 14 KB, no abrirá

Todo se reduce a esto (después de xhr, los encabezados están configurados, el objeto de archivo está listo, etc.):

var reader = new FileReader(); 
    reader.onload = function(evt) { 
    xhr.send(evt.target.result) 
    } 
    reader.readAsBinaryString(f); 

que devuelve datos grandes, malos. ¿Hay algo claramente mal con eso?

Answer 1

Esto es probablemente porque estás leyendo el archivo como una cadena binaria y construyendo la solicitud multipart/form-data manualmente. Para empezar, no es necesario que use FileReader. Como solo desea enviar el contenido, intente usar xhr.send(File) o xhr.send(FormData). Este último construye y envía un multipart/form-data para usted:

function uploadFiles(url, files) { 
    var formData = new FormData(); 

    for (var i = 0, file; file = files[i]; ++i) { 
    formData.append(file.name, file); 
    } 

    var xhr = new XMLHttpRequest(); 
    xhr.open('POST', url, true); 
    xhr.onload = function(e) { ... }; 

    xhr.send(formData); // multipart/form-data 
} 

document.querySelector('input[type="file"]').onchange = function(e) { 
    uploadFiles('/server', this.files); 
};