Dodatek FormData nie działa

Question

Napisałem to, aby przesłać obraz do mojego lokalnego serwera WWW Apache, używając elementu input w kodzie HTML. file jest zalogowany jako nie pusty, ale dlaczego form_data jest całkowicie pusty?

$('#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); 
     } 
    }); 

}); 

To jest moje upload.php na lokalnym serwerze internetowym

<?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; 
    } 
?> 

The console.log(response) dzienników wszystkie linie kodu z pliku PHP, zamiast zwróconego wyniku echo

Answer 1

Po zalogowaniu obiekt formData z zaledwie console.log(formData) zawsze zwraca puste, ponieważ nie można zarejestrować formData.

Jeśli po prostu trzeba ją zalogować przed wysłaniem go można użyć entries() aby wpisy w formData sprzeciw

$('#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

Zauważyłem sobie, że contentType: false będzie działać tylko na jQuery 1.7.0 i powyżej. Dlatego upewnij się, że używasz właściwej wersji jQuery.