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

Téléchargement simultané de données et de fichiers à l'aide d'Ajax

L'utilisation d'Ajax pour la soumission de formulaires offre une expérience utilisateur transparente, mais des défis surviennent lorsque l'on tente de télécharger les deux données et fichiers simultanément. Cet article aborde ce problème en montrant comment combiner les méthodes de téléchargement de fichiers et de collecte de données pour réussir une soumission multi-champs.

Comprendre le problème

La requête découle des différentes stratégies utilisées pour soumettre des données et des fichiers à l'aide de jQuery et Ajax. Alors que les données sont collectées à l'aide de .serialize(), les fichiers utilisent new FormData($(this)[0]). La fusion de ces techniques permet la transmission simultanée de données et de fichiers.

La solution

La résolution réside dans l'utilisation correcte de l'identifiant jQuery. En employant new FormData(this) au lieu de son homologue initial, les données et les fichiers peuvent être encapsulés dans un objet FormData. Cet objet sert ensuite de paramètre de données pour la requête Ajax.

Exemple de code

L'extrait de code suivant présente l'intégration des deux méthodes :

$("form#data").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
    });
});

Détails d'implémentation

Dans le code fourni, un Ajax La demande est lancée lors de la soumission du formulaire, en utilisant l'objet FormData pour encapsuler tous les champs et fichiers du formulaire. Les options contentType et processData sont désactivées pour garantir que le FormData natif reste inchangé. Le rappel de réussite gère la réponse reçue du serveur.

Version simplifiée

Par souci de concision, le code suivant propose une version simplifiée de la solution :

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

    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });
});

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!