FormData append funktioniert nicht

Question

Ich schrieb dies, um ein Bild auf meinen lokalen Apache-Webserver mit input Element in HTML zu laden. Die file wird als nicht leer protokolliert, aber warum ist die form_data komplett leer?

$('#upload-image').change(function(e){ 
    var file = e.target.files[0]; 
    var imageType = /image.*/; 
    if (!file.type.match(imageType)) 
     return; 
    console.log(file); 
    var form_data = new FormData(); 
    form_data.append('file', file); 
    console.log(form_data); 
    $.ajax({ 
     url: 'http://localhost/upload.php', 
     cache: false, 
     contentType: false, 
     processData: false, 
     data: form_data, 
     type: 'POST', 
     success: function(response){ 
      console.log(response); 
     }, 
     error: function(error){ 
      console.log(error); 
     } 
    }); 

}); 

Das ist mein upload.php auf lokalen Webserver

<?php 
    header('Access-Control-Allow-Origin: *'); 
    if (0 < $_FILES['file']['error']) { 
     echo 'Error: ' . $_FILES['file']['error'] . '<br>'; 
    } 
    else { 
     move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']); 
     $target_path = $_SERVER['DOCUMENT_ROOT'] . "/uploads/" . $_FILES['file']['name']; 
     echo $target_path; 
    } 
?> 

Die console.log(response) Protokolle alle Codezeilen PHP-Datei anstelle des zurückgegebenen Ergebnisses von echo

Answer 1

Wenn mit nur einem Formdata-Objekt Protokollierung console.log(formData) es wird immer leer zurückgegeben, da Sie formData nicht protokollieren können.

Wenn Sie es einfach einloggen müssen, bevor sie senden, können Sie entries() verwenden die Einträge in den Formulardaten zu erhalten Objekt

$('#upload-image').change(function(e) { 
    var file = e.target.files[0]; 
    var imageType = /image.*/; 

    if (!file.type.match(imageType)) return; 

    var form_data = new FormData(); 
    form_data.append('file', file); 

    for (var key of form_data.entries()) { 
     console.log(key[0] + ', ' + key[1]); 
    } 

    $.ajax({ 
     url: 'http://localhost/upload.php', 
     cache: false, 
     contentType: false, 
     processData: false, 
     data: form_data, 
     type: 'POST', 
     success: function(response) { 
      console.log(response); 
     }, 
     error: function(error) { 
      console.log(error); 
     } 
    }); 

}); 

Answer 2

ich bemerkt habe, dass die contentType: false nur auf jQuery arbeiten 1.7.0 und darüber. Stellen Sie also sicher, dass Sie die richtige jQuery-Version verwenden.