Tutorial ini menjelaskan cara mengunggah banyak file melalui jQuery AJAX dengan PHP. Akan mudah untuk mengikuti tutorial ini jika Anda membaca satu unggahan gambar
Contoh ini menunjukkan formulir yang berisi input untuk memilih dan mengunggah banyak file. Bidang-bidang ini mendorong file yang diunggah ke dalam array input
Fungsi AJAX di jQuery membuat serialisasi data formulir dan memposting ke server. Skrip PHP sisi server mengulangi array $_FILES untuk mengunggah banyak file ke target
Targetnya bisa berupa database atau folder untuk meletakkan file yang diunggah pengguna. Sebagian besar aplikasi memiliki direktori untuk mengunggah file dan menyimpan jalur ke dalam database. Anda juga dapat mengunggah file biner ke database secara langsung sebagai BLOB
Lihat Demo
Beberapa File Masukan
Lihat tangkapan layar di bawah ini menunjukkan input beberapa file dalam bentuk HTML. Input file ini memiliki nama sebagai userImage[]. Itu membuat larik nama file, jalur sumber sementara, dan lainnya dengan larik PHP $_FILES['userImage'].
Kode ini menunjukkan HTML untuk menampilkan formulir sederhana untuk memilih beberapa file untuk diunggah
PHP AJAX Multiple Image UploadUpload Multiple Image
Image Preview
No Images in Gallery
Alih-alih memiliki jumlah bidang yang tetap, kita dapat memiliki opsi 'tambahkan lebih banyak' untuk merender lebih banyak input file. Sebelumnya, kita telah melihat cara menambahkan input teks dinamis ke dalam formulir dengan mengklik 'tambahkan lagi'
jQuery AJAX Memanggil untuk Mengunggah Banyak Gambar
Jika Anda membaca skrip upload file tunggal PHP, maka skrip jQuery ini akan familier. Tidak ada upaya ekstra yang diperlukan untuk menyiapkan AJAX untuk contoh upload banyak file PHP
Itu memanggil AJAX saat mengirimkan formulir. Ini memposting data formulir ke server dengan kode minimal
$(document).ready(function() { $("#uploadForm").on('submit', function(event) { event.preventDefault(); var valid = false; $("input[type='file']").each(function() { if ($(this).val() != '') { valid = true; } }); $("#validation-message-info").html(""); if (valid) { $("#loader-icon").show(); $("#btn-file-submit").hide(); var formData = new FormData($("#uploadForm")[0]) $.ajax({ url: "upload.php", type: "POST", data: formData, contentType: false, cache: false, processData: false, success: function(data) { if (data) { $("#gallery").html(data); $("#loader-icon").hide(); $("#validation-message-info").remove(); $("#btn-file-submit").hide(); } } }); } else { $("#validation-message-info").html("Please choose atleast one file."); } }); }); _Iterasi File Gambar di PHP
Di sisi server, skrip upload banyak file PHP mengulang array $_FILES. Kode di bawah ini menunjukkan cara mendapatkan informasi banyak file dan mengunggahnya
Contoh ini mengunggah file ke direktori bernama images di root. Pastikan jalur target dan izin untuk menjalankan contoh ini di lingkungan Anda
Setelah berhasil mengunggah, skrip PHP ini menyiapkan HTML untuk menampilkan pratinjau file yang diunggah. Blok sukses AJAX akan menerima respons HTML ini dan menampilkannya di layar
unggah banyak gambar dengan pratinjau gambar sebelum mengunggah dan dengan memiliki bilah kemajuan dan juga memiliki opsi tambah dan hapus gambar seperti facebook menggunakan jQuery AJAX dan PHP adalah yang paling keren dan ramah pengguna
Anda juga dapat memilih satu atau beberapa file dari beberapa folder beberapa kali sebelum mengunggah dan mengunggah ke folder dalam satu klik
Anda juga dapat menyimpan nama gambar di database dengan mengikuti tutorial
Kami menyediakan kode singkat yang mudah dan berguna untuk mengunggah banyak gambar dengan pratinjau dan bilah progres menggunakan jQuery AJAX dan PHP
Setelah Gambar diunggah, Gambar akan segera ditampilkan di halaman web tanpa penyegaran halaman
Mengunggah gambar dengan pratinjau dan bilah kemajuan dan tanpa penyegaran halaman adalah cara yang paling keren dan ramah pengguna daripada menyegarkan halaman
Dalam tutorial ini, saya akan menjelaskan kepada Anda bagaimana Anda dapat mengunggah banyak file gambar dan menampilkan pratinjau sebelum mengunggah dan dengan memiliki bilah progres dan juga memiliki opsi tambah dan hapus gambar menggunakan jQuery AJAX dan PHP
Unduh
Jadi mari kita mulai coding, kita hanya membutuhkan 2 file untuk mengunggah banyak gambar dengan jQuery Ajax dan PHP
1. indeks. php (html,css,jquery)
2. unggah_ajax. php
Langkah1. Sertakan Bootstrap, file jQuery (index. php)
Karena kami akan membuat formulir pengunggahan gambar dengan Bootstrap dan menangani pengiriman formulir dengan plugin Formulir jQuery, jadi kami akan menyertakan file yang terkait dengan ini
Anda juga dapat mengunduh tautan ini dan terhubung secara offline
Langkah2. Formulir Unggah Gambar Desain (index. php)
Sekarang kita akan mendesain beberapa formulir upload gambar dengan Bootstrap di index. php
Langkah3. Buat Formulir Unggah Gambar (index. php)
Sekarang kita akan membuat beberapa formulir upload gambar dengan Bootstrap di index. php
Langkah4. Tangani Pengiriman Formulir Pengunggahan Gambar dengan jQuery Ajax (index. php)
Di upload_image. js, kami akan menangani fungsionalitas untuk mengirimkan formulir ke upload_image. php pada acara perubahan untuk mengunggah banyak gambar
Langkah5. Tangani Pengunggahan Banyak Gambar di Server End (upload_ajax. php)
Sekarang di unggah_ajax. php, kami akan menangani fungsionalitas untuk mengunggah banyak gambar ke server
Gambar yang diunggah juga dikompresi dengan bantuan kompresor gambar
Anda juga dapat memasukkan detail gambar yang diunggah ke dalam tabel database MySQL. Tulis saja kueri mysql ke dalam kode di bawah ini