Ajax JS/PHP Image Uploader nie działa

Question

Próbowałem wielu podejść i podążałem za wieloma pytaniami w StkOvfl i W3 Specifications, ale wciąż nie mam pojęcia.

mam wejście forma:

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

Wtedy w moim JavaScript (prepareFormData metoda): [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); 
    } 

Kiedy console.log(files), uzyskać wszystkie pliki wszystko w porządku. Ale formData nie działa. Próbowałem również dodać dowolną pozycję jako:

formData.append("Apple", 1); 

Odpowiedź, którą otrzymuję, jest pusta. Serwer ma odpoczynek w php jak:

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

Answer 1

Jestem w 99% pewien, że teraz to twój nagłówek, a jeśli spojrzeć w dziennikach lub włączyć ostrzeżenia PHP zobaczysz Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0

skopiowałem ten (i dodaje swój wiersz nagłówka i usuwa plik wejściowy) z MDN i prowadził ją w skrypcie na moim komputerze dev, który jest ustawiony wykrzyczeć wszystkie błędy i mam tego błędu, a następnie pustą tablicę

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); 

Powrót kilka minut później po podjęciu decyzji o spójrz dlaczego. Ma to związek z granicą danych wieloczęściowych. XHR automatycznie ustawia nagłówek z pasującą granicą, gdy wykonujesz xhr.send(formData) (lub gdzieś po drodze). Po ustawieniu tego nagłówka, żądanie używa tego zamiast wymazywać granicę, a PHP nie wie, gdzie podzielić dane wejściowe. Oto krótka zasłona na ekranie, która wskazuje to znacznie lepiej.