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
Lepaskan: 2024-12-01 20:21:14
asal
1019 orang telah melayarinya

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

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' />");
    });
});
Salin selepas log masuk

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

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

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!

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