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

Mehrere Bilder mit AJAX, PHP und jQuery hochladen

Das Hochladen mehrerer Bilder mit AJAX kann eine Herausforderung sein, wenn Sie damit nicht vertraut sind Verfahren. Dieser Artikel führt Sie durch die erforderlichen Schritte und hebt die Schlüsselkomponenten des HTML-, jQuery/AJAX- und PHP-Codes hervor. Wir stellen auch ein funktionierendes Codebeispiel zur Verfügung, um die Lösung zu veranschaulichen.

HTML

Der HTML-Code definiert das Formular, in dem Benutzer mehrere Bilder zum Hochladen auswählen können. Es enthält ein Eingabefeld mit dem Mehrfachattribut, das es Benutzern ermöglicht, mehr als ein Bild gleichzeitig auszuwählen. Wir fügen außerdem für jede Datei einen Fortschrittsbalken hinzu, um den Upload-Status anzuzeigen.

<form>

jQuery/AJAX

Der jQuery/AJAX-Code verwaltet den Datei-Upload Verfahren. Wir verwenden das Änderungsereignis, um den Upload auszulösen, wenn der Benutzer die Dateien auswählt. Anschließend durchlaufen wir jede ausgewählte Datei und erstellen für jede Datei einen neuen Fortschrittsbalken.

$(document).on("change", "input[name^='file']", function(e){
    e.preventDefault();
    var This    =   this,
        display =   $("#uploads");

    // list all file data
    $.each(This.files, function(i, obj){
        // for each image run script asynchronous
        (function(i) {
            // get data from input file
            var file = This.files[i],
                name = file.name,
                size = file.size,
                type = file.type,
                lastModified        =   file.lastModified,
                lastModifiedDate    =   file.lastModifiedDate,
                webkitRelativePath  =   file.webkitRelativePath,
                //slice               =   file.slice,
                i = i;

            // DEBUG
       /*
            var acc = []
            $.each(file, function(index, value) {
                acc.push(index + ": " + value);
            });
            alert(JSON.stringify(acc));
        */

            $.ajax({
                url:'/ajax/upload.php',
                contentType: "multipart/form-data",
                data:{
                        "image":
                        {
                            "name":name,
                            "size":size,
                            "type":type,
                            "lastModified":lastModified,
                            "lastModifiedDate":lastModifiedDate,
                            "webkitRelativePath":webkitRelativePath,
                            //"slice":slice,
                        }
                    },
                type: "POST",
                // Custom XMLHttpRequest
                xhr: function() {
                    var myXhr = $.ajaxSettings.xhr();
                    // Check if upload property exists
                    if(myXhr.upload)
                    {
                        // For handling the progress of the upload
                        myXhr.upload.addEventListener("progress",progressHandlingFunction, false); 
                    }
                    return myXhr;
                },
                cache: false,
                success : function(data){
                    // load ajax data
                    $("#listTable").append(data);
                }
            });
            // display progress
            function progressHandlingFunction(e){
                if(e.lengthComputable){
                    var perc = Math.round((e.loaded / e.total)*100);
                    perc = ( (perc >= 100) ? 100 : ( (perc <= 0) ? 0 : 0 ) );
                $("#progress"+i+" > div")
                    .attr({"aria-valuenow":perc})
                        .css("width", perc+"%");
                }
            }
            // display list of files
            display.append('<li>'+name+'</li><div class="progress">

PHP

Schließlich übernimmt der PHP-Code den Datei-Upload auf die serverseitig. Es empfängt die hochgeladenen Dateien und verarbeitet sie.

<?php
    if (isset($_POST["image"])) {
        // do php stuff
        // call `json_encode` on `file` object
        $file = json_encode($_POST["file"]);
        // return `file` as `json` string
        echo $file;
    }
?>

Fazit

Durch die Kombination dieser Komponenten können wir das Hochladen mehrerer Bilder mit AJAX, PHP und jQuery erreichen. Mit dieser Funktion können Benutzer bequem mehrere Bilder gleichzeitig hochladen, was das Benutzererlebnis verbessert und den Datei-Upload-Prozess rationalisiert.

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