Comment puis-je télécharger simultanément des données et des fichiers en utilisant Ajax dans un seul formulaire ?

Téléchargement de données et de fichiers dans un seul formulaire avec Ajax

Lorsque vous utilisez jQuery et Ajax pour interagir avec des formulaires, il est courant de soumettre soit des données ou des fichiers, mais pas les deux simultanément. Cela peut présenter un défi lorsque vous devez télécharger les deux types de contenu.

Explication du problème

Le principal problème réside dans les différentes manières dont les données et les fichiers sont collectés avant la soumission. . Les données sont généralement sérialisées à l'aide de la méthode .serialize(), tandis que les fichiers sont gérés à l'aide d'un objet FormData.

Solution

Pour télécharger à la fois des données et des fichiers dans un seul formulaire via Ajax, vous pouvez exploiter la puissance de FormData. Cet objet vous permet de combiner facilement les deux types de contenus. Voici comment :

<form>

$("form#datafiles").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this); // Gather both data and files into a single FormData object

    $.ajax({
        url: window.location.pathname, // Your PHP endpoint URL
        type: 'POST',
        data: formData,
        success: function(data) {
            alert(data); // Output the response from your PHP script
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

Script PHP

Côté serveur, votre script PHP pourra accéder à la fois aux données et aux fichiers soumis par votre formulaire. Vous pouvez utiliser $_POST et $_FILES pour récupérer ces informations.

<?php
// Display contents of $_POST
print_r($_POST);

// Display contents of $_FILES
print_r($_FILES);
?>

Conclusion

En utilisant FormData, vous pouvez facilement soumettre à la fois des données et des fichiers à partir d'un seul formulaire en utilisant Ajax. Cette approche rationalise vos formulaires et améliore l'efficacité de la gestion de vos dossiers et de vos données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!