Maison > développement back-end > tutoriel php > Comment gérer les événements de soumission et de modification pour les téléchargements d'images Ajax ?

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

Patricia Arquette
Libérer: 2024-12-15 19:34:17
original
211 Les gens l'ont consulté

How to Handle Submit and Change Events for Ajax Image Uploads?

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);
        }
    });
}));
Copier après la connexion

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();
});
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal