Wie behebt man Probleme beim Hochladen von AJAX-Bildern: Formularübermittlung und Auslösen des Hochladens?

Ajax-fähiger Bild-Upload

Beim Versuch, ein Formular zum Hochladen von Bildern in AJAX zu konvertieren, kann es zu Problemen kommen, da das Formular nicht reagiert zur Übermittlung oder Dateiauswahl, die die Upload-Funktion nicht auslöst. Hier ist eine detaillierte Erklärung der Lösung:

Behebung des Formularübermittlungsproblems

Dem ursprünglichen JavaScript-Code fehlte die ordnungsgemäße Fehler- und Erfolgsbehandlung innerhalb des AJAX-Aufrufs. Um dies zu beheben, fügen Sie Folgendes hinzu:

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

Diese Funktionen bieten eine Möglichkeit, die Antwort vom Server zu überprüfen und mögliche Fehler oder erfolgreiche Uploads zu behandeln.

Upload auslösen Dateiauswahl

Um die Upload-Funktion sofort nach der Dateiauswahl auszulösen, fügen Sie den folgenden Ereignis-Listener zu Ihrer Dateieingabe hinzu Element:

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

Dieser Code wartet auf Änderungen am Wert des Dateieingabeelements und übermittelt automatisch das Formular, wodurch der AJAX-Upload initiiert wird.

Vollständiger Codeausschnitt

Wenn Sie die oben genannten Lösungen kombinieren, sollte Ihr endgültiger JavaScript-Code so aussehen:

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

Das obige ist der detaillierte Inhalt vonWie behebt man Probleme beim Hochladen von AJAX-Bildern: Formularübermittlung und Auslösen des Hochladens?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!