Comment puis-je télécharger des données et des fichiers simultanément à l'aide d'Ajax ?

Télécharger à la fois des données et des fichiers dans un seul formulaire à l'aide d'Ajax

Le téléchargement de données et de fichiers dans un seul formulaire Ajax est une exigence courante dans les applications Web. Voici une explication détaillée sur la façon d'accomplir cette tâche efficacement.

Le problème

Essayer de soumettre à la fois des données et des fichiers à l'aide d'Ajax peut être délicat en raison des différentes manières dont ils sont gérés par jQuery. Alors que $.serialize() rassemble les données dans un tableau, les fichiers de formulaire nécessitent l'utilisation de new FormData().

Combinaison des méthodes

La clé pour fusionner ces méthodes utilise l'objet FormData. FormData est un constructeur intégré qui vous permet de créer un objet de données de formulaire. Cet objet peut contenir à la fois des données et des fichiers, ce qui le rend idéal pour notre objectif.

Exemple

Pour combiner les deux méthodes, utilisez le code suivant :

$("form#datafiles").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

Dans ce cas, le formulaire #datafiles contient à la fois des entrées de données régulières et une entrée de fichier. La nouvelle ligne FormData(this) crée un nouvel objet FormData avec les données du formulaire.

Script PHP

Pour gérer les données et les fichiers téléchargés côté serveur, utilisez un script PHP comme celui-ci :

<?php

print_r($_POST);
print_r($_FILES);

?>

Avec ce code, vous pouvez accéder à la fois aux données du formulaire et aux fichiers téléchargés en utilisant $_POST et $_FILES superglobales.

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!