Wie gehe ich mit mehreren Datei-Uploads mit PHP, jQuery und AJAX um?

Mehrere Datei-Uploads mit PHP, jQuery und AJAX handhaben

In diesem Beitrag werden wir untersuchen, wie man mehrere Datei-Uploads mit PHP, jQuery und AJAX effektiv handhabt . Wir werden den Prozess in drei Schritte unterteilen: Vorbereiten des Formulars, Hinzufügen der Funktionalität mit jQuery und Verarbeiten des Datei-Uploads.

Vorbereiten des Formulars

Beginnen Sie mit der Erstellung ein HTML-Formular, das mehrere Schaltflächen zum Durchsuchen von Dateien enthält. Für jede Dateieingabe sollte das Namensattribut auf file[] gesetzt sein, was angibt, dass sie ein Array von Dateien verarbeiten kann. Fügen Sie eine Schaltfläche zum Senden von Formularen hinzu.

Hinzufügen der jQuery-Funktionalität

Nutzen Sie jQuery, um die Funktionalität zum Hinzufügen zusätzlicher Schaltflächen zum Durchsuchen von Dateien hinzuzufügen. Implementieren Sie einen Klick-Handler für die Schaltfläche „Weitere Dateien hinzufügen“, der dem Formular dynamisch neue Dateieingabeelemente hinzufügt.

Verarbeitung des Datei-Uploads

Im PHP-Skript Wir verarbeiten den Datei-Upload. Verwenden Sie eine Schleife, um jede Datei im Array $_FILES['file'] zu durchlaufen. Der Zielpfad für die hochgeladene Datei wird eindeutig generiert, um Überschreibungen zu verhindern. Nachdem die Datei in den Zielpfad verschoben wurde, geben Sie eine Erfolgs- oder Fehlermeldung zurück.

Senden des Formulars mit AJAX

Um das Formular über AJAX zu senden, verwenden Sie Folgendes Code:

$('body').on('click', '#upload', function(e){
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);

    $.ajax({
        url: 'upload.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function (data) {
            alert("Data Uploaded: "+data);
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
    return false;
});

Diese Funktion bindet einen Click-Handler an die Schaltfläche „Datei hochladen“, erstellt ein FormData-Objekt mit den Formulardaten und sendet es eine AJAX-Anfrage an upload.php, verarbeitet die Serverantwort und verhindert die standardmäßige Formularübermittlung.

Das obige ist der detaillierte Inhalt vonWie gehe ich mit mehreren Datei-Uploads mit PHP, jQuery und AJAX um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!