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

Memuat Naik Berbilang Fail dengan jQuery, AJAX dan PHP

Pengenalan

Memuat naik berbilang fail daripada borang web ke pelayan adalah tugas biasa dalam pembangunan web. Dalam artikel ini, kami akan membimbing anda melalui proses memuat naik berbilang fail menggunakan PHP, jQuery dan AJAX.

Reka Bentuk Borang

Langkah pertama ialah mencipta borang yang membolehkan pengguna memilih dan muat naik fail. Penanda HTML berikut mewakili bentuk ringkas yang pada mulanya mengandungi satu medan input fail:

<form enctype="multipart/form-data" action="upload.php" method="post">
    <input name="file[]" type="file" />
    <button class="add_more">Add More Files</button>
    <input type="button">

jQuery untuk Menambah Lebih Banyak Fail

Untuk membenarkan pengguna memuat naik berbilang fail, kami akan menggunakan jQuery untuk tambah medan input fail tambahan secara dinamik apabila butang "Tambah Lagi Fail" diklik:

$(document).ready(function(){
    $('.add_more').click(function(e){
        e.preventDefault();
        $(this).before("<input name='file[]' type='file' />");
    });
});

Fail PHP Pengendalian

Atribut tindakan bentuk ditetapkan kepada "upload.php", iaitu skrip PHP yang akan mengendalikan muat naik fail. Berikut ialah contoh kod PHP:

for($i=0; $i<count($_FILES['file']['name']); $i++){
    $target_path = "uploads/";
    $ext = explode('.', basename( $_FILES['file']['name'][$i]));
    $target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1]; 

    if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {
        echo "The file has been uploaded successfully <br />";
    } else{
        echo "There was an error uploading the file, please try again! <br />";
    }
}

AJAX untuk Menghantar Borang

Untuk menyerahkan borang menggunakan AJAX, kami akan menggunakan kaedah .submit() dan .ajax() jQuery :

$('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;
});

Dengan menggunakan kod ini, anda boleh mencipta medan input fail secara dinamik, mengendalikan muat naik fail pada bahagian pelayan dengan PHP dan serahkan borang secara tidak segerak menggunakan AJAX, membenarkan muat naik berbilang fail tanpa memuatkan semula halaman.

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