Ajax JS/PHP Image Uploader non funziona

Question

Ho provato diversi approcci e ho seguito molte domande in StkOvfl e nelle specifiche W3, ma non ho ancora idea.

ho un modulo di input:

<input type="file" multiple accept="image/*" id="item-image-upload" > 

Poi nel mio Javascript (prepareFormData metodo): [See full gist class here]:

var files = this.getFiles(); 
    var formData = new FormData(); 

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

     var file = files[i]; 

     if (!file.type.match('image.*')) { 
      continue; 
     } 

     formData.append(this.uploadEntityName, file); 
    } 

Quando ho console.log(files), ricevo tutti i file tutti bene. Ma formData non funziona. Ho anche provato ad aggiungere un elemento arbitrario come:

formData.append("Apple", 1); 

La risposta che ottengo è vuota. Il server esegue riposo in PHP come:

public function uploadImage(){ 
    return json_encode(array_merge($_REQUEST, $_FILES)); 
} 

Answer 1

Sono al 99% sicuro ora che è l'intestazione, e che se si guarda nei log oppure attivare la funzione PHP Avvertenze vedrai Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0

ho copiato questo (e ho aggiunto la vostra linea di intestazione e rimosso il file di input) da MDN e corse su uno script sulla mia macchina dev che è impostato per gridare tutti gli errori ed ho ottenuto questo errore, seguito da un array vuoto

var formData = new FormData(); 

formData.append("username", "Groucho"); 
formData.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456" 

// JavaScript file-like object 
var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file... 
var blob = new Blob([content], { type: "text/xml"}); 

formData.append("somefiles[]", blob); 

var request = new XMLHttpRequest(); 
request.open("POST", "MYDEVBOX/testpost.php"); 
// remove the line below and it works 
request.setRequestHeader("Content-Type", "multipart/form-data"); 
request.responseType = "json"; 
request.send(formData); 

Torna alcuni minuti dopo aver deciso di o esaminare perché. Ha a che fare con il confine dei dati multiparte. XHR sta automaticamente impostando l'intestazione con il contorno corrispondente quando si fa xhr.send(formData) (o da qualche parte lungo la strada). Quando si imposta quell'intestazione, la richiesta lo utilizza, eliminando il confine e PHP non sa dove suddividere l'input. Ecco una schermata veloce che la evidenzia molto meglio.