Wie übermittle ich ein Datei-Upload-Formular mit jQuery Ajax?

Datei-Upload mit jQuery-Serialisierung

Sie haben ein Formular, das Sie über Ajax mit der jQuery-Serialisierungsfunktion übermitteln. Allerdings treten Probleme auf, wenn das Formular eine Feld. Die serialisierten Formulardaten enthalten die Datei nicht und das Drucken von $_FILES führt zu einem leeren Ergebnis.

Lösung: Verwendung des FormData-Objekts

Um dieses Problem zu beheben, können Sie das FormData-Objekt verwenden. Es ist mit jedem Formulartyp kompatibel, auch mit solchen mit Dateieingaben. So implementieren Sie es:

$(document).on("submit", "form", function(event) {
    event.preventDefault();
    $.ajax({
        url: $(this).attr("action"),
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status) {

        },
        error: function (xhr, desc, err) {
            
        }
    });        
});

Mithilfe des FormData-Objekts können Sie die Datei zusammen mit anderen Formulardaten in der Ajax-Anfrage übergeben. Die Optionen „processData“ und „contentType“ werden auf „false“ gesetzt, um zu verhindern, dass jQuery Daten und Inhaltstypen verarbeitet, und damit der Browser die Formularübermittlung korrekt verarbeiten kann.

Das obige ist der detaillierte Inhalt vonWie übermittle ich ein Datei-Upload-Formular mit jQuery Ajax?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!