Carga de un archivo con XMLHttprequest - Falta el límite en multipart/form-data

Question

Estoy cargando un archivo con XMLHttprequest. Aquí está la función JS, que carga un archivo:

var upload = function(file) { 
    // Create form data 
    var formData = new FormData(); 
    formData.append('file', file); 

    var xhr = new XMLHttpRequest(); 

    // Open 
    xhr.open('POST', this.options.action); 

    // Set headers 
    xhr.setRequestHeader("Cache-Control", "no-cache"); 
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
    xhr.setRequestHeader("Content-Type", "multipart/form-data"); 
    xhr.setRequestHeader("X-File-Name", file.fileName); 
    xhr.setRequestHeader("X-File-Size", file.fileSize); 
    xhr.setRequestHeader("X-File-Type", file.type); 

    // Send 
    xhr.send(formData); 
} 

En el lado del servidor, en upload.php leí el archivo de esta manera:

file_put_contents($filename, (file_get_contents('php://input'))); 

Todo funciona bien, excepto que Me aparece una advertencia de PHP:

Missing boundary in multipart/form-data POST data in Unknown on line 0.

Si elimino esta línea: xhr.setRequestHeader("Content-Type", "multipart/form-data");, la advertencia desaparece.

¿Cuál debería ser el problema aquí?

Answer 1

Bueno, esto es un poco extraño para mí, pero esto es lo que ha funcionado:

// Open 
xhr.open('POST', this.options.action, true); 

// !!! REMOVED ALL HEADERS 

// Send 
xhr.send(formData); 

En este caso, en el lado del servidor no leo el archivo enviado a través de php://input pero el archivo estará en la matriz $_FILES.

Esto resolvió mi problema, pero todavía tengo curiosidad por qué aparece ahora el archivo en $_FILES?

Probado en Chrome, Mozilla, Safari e IE10.