Rumah >pembangunan bahagian belakang >tutorial php >Bagaimana untuk Melaksanakan Pemuat Naik Berbilang Fail Menggunakan PHP, jQuery dan AJAX?

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

Patricia Arquette
Patricia Arquetteasal
2024-12-01 20:21:14962semak imbas

How to Implement a Multi-File Uploader Using PHP, jQuery, and AJAX?

Cara Melaksanakan Pemuat Naik Fail dengan Berbilang Fail Menggunakan PHP, jQuery dan AJAX

Untuk borang muat naik fail untuk membolehkan pemilihan berbilang fail , pengguna biasanya mengklik butang "Tambah Lagi Fail", secara dinamik menambah lebih banyak butang 'semak imbas'. Fungsi ini boleh dilaksanakan menggunakan jQuery dan AJAX untuk menyerahkan borang dan mengendalikan muat naik fail dari jauh.

Persediaan Awal

Buat borang HTML dengan satu butang 'semak imbas' pada mulanya . Sertakan butang "Tambah Lagi Fail" untuk menambahkan lebih banyak butang 'semak imbas' secara dinamik mengikut keperluan. Berikut ialah struktur HTML awal:

<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">

Tambah pengendali fungsi JavaScript untuk butang "Tambah Lagi Fail" untuk menambah input muat naik fail tambahan secara dinamik:

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

Laksanakan bahagian pelayan logik pengendalian muat naik fail dalam fail PHP yang berasingan ('upload.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 Pelaksanaan

Untuk menyerahkan borang melalui AJAX, ubah suai pengendali klik jQuery untuk butang "Muat Naik Fail" seperti berikut:

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

Kod ini mencipta objek FormData daripada borang data, menetapkan pilihan AJAX yang sesuai dan menyerahkan borang. Respons pelayan (dalam kes ini, mesej pengesahan mudah) dipaparkan dalam dialog makluman.

Dengan pengubahsuaian ini, borang anda akan diserahkan secara dinamik menggunakan AJAX, membolehkan pengguna memuat naik berbilang fail serentak.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Pemuat Naik Berbilang Fail Menggunakan 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