Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Muat Naik Berbilang Imej Menggunakan AJAX, PHP, dan jQuery?

Bagaimana untuk Muat Naik Berbilang Imej Menggunakan AJAX, PHP, dan jQuery?

Linda Hamilton
Lepaskan: 2024-12-13 03:04:09
asal
521 orang telah melayarinya

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

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>
Salin selepas log masuk

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">
Salin selepas log masuk

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;
    }
?>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan