Heim >Web-Frontend >js-Tutorial >Wie kann ich mit Ajax Daten und Dateien gleichzeitig hochladen?

Wie kann ich mit Ajax Daten und Dateien gleichzeitig hochladen?

Susan Sarandon
Susan SarandonOriginal
2024-12-13 16:13:10474Durchsuche

How Can I Upload Data and Files Simultaneously Using Ajax?

Hochladen von Daten und Dateien in einem Formular mit Ajax

Das Hochladen von Daten und Dateien in einem Ajax-Formular ist eine häufige Anforderung in Webanwendungen. Hier finden Sie eine ausführliche Erklärung, wie Sie diese Aufgabe effektiv lösen können.

Das Problem

Der Versuch, sowohl Daten als auch Dateien mit Ajax zu übermitteln, kann aufgrund der unterschiedlichen Methoden schwierig sein werden von jQuery verarbeitet. Während $.serialize() Daten in einem Array sammelt, erfordern Formulardateien die Verwendung von new FormData().

Kombinieren der Methoden

Der Schlüssel zum Zusammenführen dieser Methoden verwendet das FormData-Objekt. FormData ist ein integrierter Konstruktor, mit dem Sie ein Formulardatenobjekt erstellen können. Dieses Objekt kann sowohl Daten als auch Dateien enthalten und ist daher ideal für unseren Zweck.

Beispiel

Um die beiden Methoden zu kombinieren, verwenden Sie den folgenden Code:

$("form#datafiles").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
    });
});

In diesem Fall enthält das #datafiles-Formular sowohl reguläre Dateneingaben als auch eine Dateieingabe. Die neue FormData(this)-Zeile erstellt ein neues FormData-Objekt mit den Daten des Formulars.

PHP-Skript

Um die hochgeladenen Daten und Dateien auf der Serverseite zu verarbeiten, Verwenden Sie ein PHP-Skript wie dieses:

<?php

print_r($_POST);
print_r($_FILES);

?>

Mit diesem Code können Sie über $_POST und sowohl auf die Formulardaten als auch auf hochgeladene Dateien zugreifen $_FILES superglobals.

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn