Memuat Naik Berbilang Imej Menggunakan AJAX, PHP dan jQuery

Dalam perbincangan ini, isu memuat naik berbilang imej menggunakan teknik AJAX ditangani. Pengguna menerangkan mengalami kesukaran dalam menghantar berbilang fail melalui AJAX, yang membawa kepada penghantaran fail yang tidak lengkap. Artikel ini menyediakan penyelesaian komprehensif yang memanfaatkan JSON untuk memproses objek fail dengan cekap dan memudahkan muat naik yang berjaya.

HTML

Kod HTML berikut menetapkan struktur halaman web , termasuk elemen untuk fungsi seret dan lepas, input fail dan bahagian untuk memaparkan kemajuan muat naik dan hasil:

<div>

CSS

Penggayaan digunakan untuk meningkatkan antara muka pengguna dan memberikan isyarat visual semasa proses muat naik fail:

#uploads {
  display: block;
  position: relative;
}

#uploads li {
  list-style: none;
}

JavaScript

Kod JavaScript mengendalikan proses muat naik fail, memanfaatkan AJAX untuk berkomunikasi dengan pelayan. Ia menggunakan JSON untuk merangkum data fail dan teknik HTML5 untuk penjejakan kemajuan:

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

    // process file object
    $.each(This.files, function (i, file) {
        var reader = new FileReader(),
            dfd = new $.Deferred();
        reader.onload = function (e) {
            // convert file to data URL
            dfd.resolveWith(file, [e.target.result])
        };
        reader.readAsDataURL(new Blob([file], {
            "type": file.type
        }));
        dfd.then(function (data) {
            // send file data using AJAX
            $.ajax({
                url: "/echo/json/",
                type: "POST",
                data: {
                    "file": JSON.stringify({
                        "file": data,
                        "name": file.name,
                        "size": file.size,
                        "type": file.type
                    })
                }
            })
            .then(function (data, textStatus, jqxhr) {
                console.log(data)
                display.append("<br /><li>", img, "</li><br />");
                return data
            }, function (jqxhr, textStatus, errorThrown) {
                console.log(errorThrown);
                return errorThrown
            });
        })
    });
});

PHP

Skrip PHP menerima data fail yang dikodkan dalam format JSON dan mengembalikannya sebagai rentetan JSON:

<?php
if (isset($_POST["file"])) {
    // process file object
    $file = json_encode($_POST["file"]);
    // return file as JSON string
    echo $file;
};
?>

Dengan melaksanakan teknik ini, anda boleh dengan cekap muat naik berbilang imej menggunakan AJAX, PHP dan jQuery. Pendekatan JSON memudahkan penghantaran fail dan penggunaan penjejakan kemajuan meningkatkan pengalaman pengguna dengan memberikan maklum balas masa nyata tentang status muat naik.

Atas ialah kandungan terperinci Bagaimanakah saya boleh memuat naik berbilang imej dengan cekap menggunakan AJAX, PHP dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!