Memuat naik Berbilang Imej menggunakan AJAX, PHP dan jQuery

Memuat naik berbilang imej menggunakan AJAX boleh mencabar jika anda tidak biasa dengan proses. Artikel ini akan membimbing anda melalui langkah-langkah yang terlibat, menyerlahkan komponen utama kod HTML, jQuery/AJAX dan PHP. Kami juga akan menyediakan contoh kod yang berfungsi untuk menggambarkan penyelesaiannya.

HTML

Kod HTML mentakrifkan borang di mana pengguna boleh memilih berbilang imej untuk dimuat naik. Ia mengandungi medan input dengan berbilang atribut, yang membolehkan pengguna memilih lebih daripada satu imej sekaligus. Kami juga akan menambah bar kemajuan untuk setiap fail untuk menunjukkan status muat naik.

<form>

jQuery/AJAX

Kod jQuery/AJAX mengendalikan muat naik fail proses. Kami menggunakan peristiwa perubahan untuk mencetuskan muat naik apabila pengguna memilih fail. Kami kemudiannya mengulangi setiap fail yang dipilih, mencipta bar kemajuan baharu untuk setiap fail.

$(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

Akhir sekali, kod PHP mengendalikan muat naik fail pada bahagian pelayan. Ia menerima fail yang dimuat naik dan memprosesnya.

<?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;
    }
?>

Kesimpulan

Menggabungkan komponen ini, kami boleh mencapai pelbagai muat naik imej menggunakan AJAX, PHP dan jQuery. Fungsi ini membolehkan pengguna memuat naik berbilang imej serentak dengan mudah, mempertingkatkan pengalaman pengguna dan memperkemas proses muat naik fail.

Atas ialah kandungan terperinci Bagaimana untuk Muat Naik Berbilang Imej Menggunakan AJAX, PHP, dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!