Comment gérer les événements de soumission et de modification pour les téléchargements d'images Ajax ?

Téléchargement Ajax : gestion des événements de soumission et de modification

Aperçu du problème :
Amélioration d'un formulaire existant pour l'utiliser Ajax pour le téléchargement d'images, le code fourni semble incomplet, nécessitant des fonctionnalité.

Solution :

1. Implémentation de la soumission de formulaire avec Ajax :

Dans le gestionnaire d'événements pour la soumission de formulaire, le code fourni manque d'éléments importants :

• Fonctions de réussite et d'erreur : Ajax nécessite à la fois des fonctions de réussite et d'erreur pour gérer la réponse du serveur.
• Formulaire Données : Pour envoyer les données du formulaire, utilisez formData = new FormData(this); et définissez contentType et processData sur false pour la compatibilité Ajax.

Code modifié :

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

2. Déclenchement du téléchargement lors de la sélection de fichiers :

Pour lancer le téléchargement lors de la sélection de fichiers, utilisez l'événement de changement sur l'entrée du fichier :

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

Avec ces modifications, la fonctionnalité de téléchargement Ajax fonctionne comme prévu.

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!