Heim > Web-Frontend > js-Tutorial > Wie lade ich mehrere Bilder mit AJAX, PHP und jQuery hoch?

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

Linda Hamilton
Freigeben: 2024-12-13 03:04:09
Original
521 Leute haben es durchsucht

How to Upload Multiple Images Using AJAX, PHP, and jQuery?

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>
Nach dem Login kopieren

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">
Nach dem Login kopieren

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;
    }
?>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage