Wie implementiert man einen Multi-File-Uploader mit PHP, jQuery und AJAX?

So implementieren Sie den Datei-Uploader mit mehreren Dateien mithilfe von PHP, jQuery und AJAX

Für ein Datei-Upload-Formular, um die Auswahl mehrerer Dateien zu ermöglichen Klicken Benutzer normalerweise auf die Schaltfläche „Weitere Dateien hinzufügen“, wodurch dynamisch weitere Schaltflächen zum Durchsuchen hinzugefügt werden. Diese Funktionalität kann mit jQuery und AJAX implementiert werden, um das Formular zu übermitteln und den Datei-Upload aus der Ferne zu verwalten.

Ersteinrichtung

Erstellen Sie zunächst ein HTML-Formular mit einer Schaltfläche zum Durchsuchen . Fügen Sie eine Schaltfläche „Weitere Dateien hinzufügen“ hinzu, um bei Bedarf dynamisch weitere Schaltflächen zum Durchsuchen hinzuzufügen. Hier ist die anfängliche HTML-Struktur:

<form enctype="multipart/form-data" action="upload.php" method="post">
    <input name="file[]" type="file" />
    <button class="add_more">Add More Files</button>
    <input type="button">

Fügen Sie einen JavaScript-Funktionshandler für die Schaltfläche „Weitere Dateien hinzufügen“ hinzu, um zusätzliche Datei-Upload-Eingaben dynamisch hinzuzufügen:

$(document).ready(function() {
    $('.add_more').click(function(e) {
        e.preventDefault();
        $(this).before("<input name='file[]' type='file' />");
    });
});

Implementieren Sie die Serverseite Logik zur Handhabung des Datei-Uploads in einer separaten PHP-Datei ('upload.php'):

for($i=0; $i<count($_FILES['file']['name']); $i++){
    $target_path = "uploads/";
    $ext = explode('.', basename( $_FILES['file']['name'][$i]));
    $target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1];

    if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {
        echo "The file has been uploaded successfully <br />";
    } else{
        echo "There was an error uploading the file, please try again! <br />";
    }
}

AJAX Implementierung

Um das Formular über AJAX zu senden, ändern Sie den jQuery-Klick-Handler für die Schaltfläche „Datei hochladen“ wie folgt:

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

Dieser Code erstellt ein FormData-Objekt aus dem Formular Daten, legt die entsprechenden AJAX-Optionen fest und sendet das Formular ab. Die Serverantwort (in diesem Fall eine einfache Bestätigungsnachricht) wird in einem Warndialog angezeigt.

Mit diesen Änderungen wird Ihr Formular dynamisch mit AJAX übermittelt, sodass der Benutzer mehrere Dateien gleichzeitig hochladen kann.

Das obige ist der detaillierte Inhalt vonWie implementiert man einen Multi-File-Uploader mit PHP, jQuery und AJAX?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!