Wie lade ich mehrere Dateien mit jQuery, AJAX und PHP hoch?

Mehrere Dateien mit jQuery, AJAX und PHP hochladen

Einführung

Mehrere Dateien von einem Webformular in ein hochladen Server ist eine häufige Aufgabe in der Webentwicklung. In diesem Artikel führen wir Sie durch den Prozess des Hochladens mehrerer Dateien mit PHP, jQuery und AJAX.

Formulardesign

Der erste Schritt besteht darin, ein Formular zu erstellen, das Benutzern die Auswahl ermöglicht und Dateien hochladen. Das folgende HTML-Markup stellt ein einfaches Formular dar, das zunächst ein Dateieingabefeld enthält:

<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">

jQuery zum Hinzufügen weiterer Dateien

Um Benutzern das Hochladen mehrerer Dateien zu ermöglichen, verwenden wir jQuery Fügen Sie dynamisch zusätzliche Dateieingabefelder hinzu, wenn auf die Schaltfläche „Weitere Dateien hinzufügen“ geklickt wird:

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

PHP-Dateiverwaltung

Die Das Formularaktionsattribut ist auf „upload.php“ festgelegt. Dabei handelt es sich um das PHP-Skript, das den Datei-Upload übernimmt. Hier ist ein Beispiel für den PHP-Code:

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 zum Senden des Formulars

Um das Formular mit AJAX zu senden, verwenden wir die Methoden .submit() und .ajax() von jQuery :

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

Durch die Verwendung dieses Codes können Sie Dateieingabefelder dynamisch erstellen und Datei-Uploads auf der Serverseite verarbeiten PHP und senden Sie das Formular asynchron mit AJAX, sodass mehrere Datei-Uploads möglich sind, ohne dass die Seite neu geladen werden muss.

Das obige ist der detaillierte Inhalt vonWie lade ich mehrere Dateien mit jQuery, AJAX und PHP hoch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!