Wie gehe ich mit Übermittlungs- und Änderungsereignissen für Ajax-Bild-Uploads um?

Ajax-Upload: Ereignisbehandlung senden und ändern

Problemübersicht:
Verbesserung eines vorhandenen Formulars zur Verwendung Ajax zum Hochladen von Bildern verwenden, scheint der bereitgestellte Code unvollständig zu sein und erfordert zusätzlichen Code Funktionalität.

Lösung:

1. Formularübermittlung mit Ajax implementieren:

Im Event-Handler für die Formularübermittlung fehlen dem bereitgestellten Code wichtige Elemente:

• Erfolgs- und Fehlerfunktionen: Ajax benötigt sowohl Erfolgs- als auch Fehlerfunktionen, um die Antwort vom Server zu verarbeiten.
• Formular Daten: Um die Formulardaten zu senden, verwenden Sie formData = new FormData(this); und setzen Sie contentType und processData aus Gründen der Ajax-Kompatibilität auf false.

Geänderter Code:

$('#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. Auslösen des Uploads bei der Dateiauswahl:

Um den Upload bei der Dateiauswahl zu starten, verwenden Sie das Änderungsereignis für die Dateieingabe:

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

Mit diesen Änderungen wird die Ajax-Upload-Funktionalität aktiviert Funktioniert wie erwartet.

Das obige ist der detaillierte Inhalt vonWie gehe ich mit Übermittlungs- und Änderungsereignissen für Ajax-Bild-Uploads um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!