Wie verwende ich jQuerys „.submit()' und „.ajax()' für asynchrone Uploads mehrerer Dateien?

Senden von Dateien über AJAX mit jQuerys „.submit()“ und „.ajax()“

Übersicht:

Das Hochladen mehrerer Dateien auf einen Server ist eine häufige Anforderung in der Webentwicklung. Die Methoden „.submit()“ und „.ajax()“ von jQuery bieten einen praktischen Ansatz zum Senden von Formularen und zum asynchronen Senden von Daten an den Server. In diesem Artikel wird erläutert, wie Sie diese Methoden verwenden, um das Hochladen mehrerer Dateien zu erleichtern.

Formular-HTML:

Das HTML-Formular sollte mehrere Dateieingabefelder sowie ein „Mehr hinzufügen“ enthalten Schaltfläche „Dateien“ und eine Schaltfläche „Senden“. Wenn auf die Schaltfläche „Weitere Dateien hinzufügen“ geklickt wird, werden zusätzliche Dateieingabefelder dynamisch hinzugefügt.

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

JavaScript für das dynamische Hinzufügen von Dateieingaben:

Der JavaScript-Code verwendet jQuery, um zusätzliche Dateieingabefelder hinzuzufügen, 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'>");
    });
});

Hochladen Skript:

Das serverseitige PHP-Skript ('upload.php') übernimmt den Datei-Upload-Prozess, einschließlich der Validierung und Speicherung im Zielverzeichnis. Es geht von einer hierarchischen Verzeichnisstruktur aus, um die hochgeladenen Dateien zu organisieren.

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 />";
    }
}

jQuery für AJAX-Dateiübermittlung:

Schließlich sind '.submit()' und ' .ajax()-Methoden werden verwendet, um einen Ereignis-Listener an die Schaltfläche „Senden“ zu binden. Beim Klicken wird eine AJAX-Anfrage an das Skript „upload.php“ gesendet und die hochgeladenen Dateidaten werden mithilfe eines FormData-Objekts in die Anfrage einbezogen. Die „success“-Funktion von jQuery verarbeitet die Serverantwort.

$('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 Implementierung dieses Ansatzes können Sie effektiv mehrere Dateien asynchron mit PHP, jQuery und AJAX hochladen.

Das obige ist der detaillierte Inhalt vonWie verwende ich jQuerys „.submit()' und „.ajax()' für asynchrone Uploads mehrerer Dateien?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!