Wie kann ich mit Ajax gleichzeitig Daten und Dateien hochladen?

Gleichzeitiges Hochladen von Daten und Dateien mit Ajax

Die Verwendung von Ajax für die Formularübermittlung bietet eine nahtlose Benutzererfahrung, beim Versuch, beides hochzuladen, treten jedoch Herausforderungen auf Daten und Dateien gleichzeitig. Dieser Artikel befasst sich mit diesem Problem und zeigt, wie die Datei-Upload- und Datenerfassungsmethoden kombiniert werden können, um eine erfolgreiche Übermittlung mehrerer Felder zu erreichen.

Das Problem verstehen

Die Abfrage stammt aus den unterschiedlichen Strategien zur Übermittlung von Daten und Dateien mit jQuery und Ajax. Während Daten mit .serialize() gesammelt werden, verwenden Dateien new FormData($(this)[0]). Die Zusammenführung dieser Techniken ermöglicht die gleichzeitige Übertragung von Daten und Dateien.

Die Lösung

Die Lösung liegt in der korrekten Verwendung des jQuery-Identifiers. Durch die Verwendung von new FormData(this) anstelle seines ursprünglichen Gegenstücks können sowohl Daten als auch Dateien in ein FormData-Objekt gekapselt werden. Dieses Objekt dient dann als Datenparameter für die Ajax-Anfrage.

Beispielcode

Der folgende Codeausschnitt zeigt die Integration beider Methoden:

$("form#data").submit(function(e) {
    e.preventDefault();

    var formData = new FormData(this);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data);
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

Implementierungsdetails

Im bereitgestellten Code ein Ajax Die Anfrage wird bei der Formularübermittlung initiiert, wobei das FormData-Objekt verwendet wird, um alle Formularfelder und Dateien zu kapseln. Die Optionen „contentType“ und „processData“ sind deaktiviert, um sicherzustellen, dass die nativen FormData unverändert bleiben. Der Erfolgsrückruf verarbeitet die vom Server empfangene Antwort.

Vereinfachte Version

Der Kürze halber bietet der folgende Code eine vereinfachte Version der Lösung:

$("form#data").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);

    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });
});

Das obige ist der detaillierte Inhalt vonWie kann ich mit Ajax gleichzeitig Daten und Dateien hochladen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!