Comment résoudre les problèmes de téléchargement d'images AJAX : soumission de formulaire et déclenchement du téléchargement ?

Téléchargement d'images compatible Ajax

Lorsque vous essayez de convertir un formulaire en AJAX pour le téléchargement d'images, vous pouvez rencontrer des problèmes avec le formulaire qui ne répond pas à la soumission ou à la sélection du fichier ne déclenchant pas la fonction de téléchargement. Voici une explication détaillée de la solution :

Résolution du problème de soumission de formulaire

Le code JavaScript d'origine manquait de gestion appropriée des erreurs et des succès dans l'appel AJAX. Pour résoudre ce problème, ajoutez ce qui suit :

success:function(data){
    console.log("success");
    console.log(data);
},
error: function(data){
    console.log("error");
    console.log(data);
}

Ces fonctions permettent d'inspecter la réponse du serveur et de gérer les erreurs potentielles ou les téléchargements réussis.

Déclenchement du téléchargement sur Sélection de fichiers

Pour déclencher la fonction de téléchargement immédiatement après la sélection du fichier, ajoutez l'écouteur d'événement suivant à votre entrée de fichier element :

$("#ImageBrowse").on("change", function() {
    $("#imageUploadForm").submit();
});

Ce code écoute toute modification apportée à la valeur de l'élément d'entrée du fichier et soumet automatiquement le formulaire, lançant ainsi le téléchargement AJAX.

Extrait de code complet

En combinant les solutions ci-dessus, votre code JavaScript final devrait ressembler à ceci :

$(document).ready(function (e) {
    $('#imageUploadForm').on('submit',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));

    $("#ImageBrowse").on("change", function() {
        $("#imageUploadForm").submit();
    });
});

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!