web-dev-qa-db-fra.com

FormData append ne fonctionne pas

J'ai écrit ceci pour télécharger une image sur mon serveur Web Apache local en utilisant l'élément input en HTML. Le file est enregistré comme non vide, mais pourquoi le form_data Est-il complètement vide?

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

});

Ceci est mon upload.php Sur le serveur Web local

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

La console.log(response) enregistre toutes les lignes de code du fichier PHP), au lieu du résultat renvoyé de echo

javascriptjqueryhtmlajaxforms
24
necroface

Lorsque vous enregistrez un objet formData avec seulement console.log(formData), il renvoie toujours vide, car vous ne pouvez pas enregistrer formData.

Si vous devez simplement le connecter avant de l'envoyer, vous pouvez utiliser entries() pour obtenir les entrées dans l'objet formData.

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

});
40
adeneo