Rumah >pembangunan bahagian belakang >tutorial php >Bagaimana Mengendalikan Muat Naik Berbilang Fail dengan PHP, jQuery, dan AJAX?

Bagaimana Mengendalikan Muat Naik Berbilang Fail dengan PHP, jQuery, dan AJAX?

Susan Sarandon
Susan Sarandonasal
2024-11-26 11:38:10227semak imbas

How to Handle Multiple File Uploads with PHP, jQuery, and AJAX?

Mengendalikan Muat Naik Berbilang Fail dengan PHP, jQuery dan AJAX

Dalam siaran ini, kami akan meneroka cara mengendalikan berbilang muat naik fail dengan berkesan menggunakan PHP, jQuery dan AJAX . Kami akan memecahkan proses kepada tiga langkah: menyediakan borang, menambah fungsi menggunakan jQuery dan memproses muat naik fail.

Menyediakan Borang

Mulakan dengan mencipta borang HTML yang merangkumi berbilang butang semak imbas fail. Setiap input fail hendaklah mempunyai atribut nama yang ditetapkan kepada fail[], menunjukkan bahawa ia boleh mengendalikan tatasusunan fail. Sertakan butang untuk penyerahan borang.

Menambah Kefungsian jQuery

Gunakan jQuery untuk menambah fungsi untuk menambah butang semak imbas fail tambahan. Laksanakan pengendali klik untuk butang "Tambah Lagi Fail" yang menambahkan elemen input fail baharu secara dinamik pada borang.

Memproses Muat Naik Fail

Dalam skrip PHP, kami memproses muat naik fail. Gunakan gelung untuk mengulangi setiap fail dalam tatasusunan $_FILES['file']. Laluan sasaran untuk fail yang dimuat naik dijana secara unik untuk mengelakkan penulisan ganti. Selepas fail dialihkan ke laluan sasaran, kembalikan mesej kejayaan atau ralat.

Menyerahkan Borang menggunakan AJAX

Untuk menyerahkan borang melalui AJAX, gunakan yang berikut kod:

$('body').on('click', '#upload', function(e){
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);

    $.ajax({
        url: 'upload.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function (data) {
            alert("Data Uploaded: "+data);
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
    return false;
});

Fungsi ini mengikat pengendali klik pada butang "Muat Naik Fail", mencipta objek FormData yang mengandungi data borang, menghantar permintaan AJAX untuk upload.php, mengendalikan respons pelayan dan menghalang penyerahan borang lalai.

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

Kenyataan:
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