Unggah banyak gambar ajax php

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 Upload






    

        
            Upload 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

Bagaimana cara mengunggah banyak gambar menggunakan Ajax di PHP?

Bagaimana cara mengunggah banyak file menggunakan Ajax di PHP?

Bagaimana cara mengunggah banyak gambar sekaligus di PHP?

Bagaimana cara mengunggah banyak gambar dalam codeigniter menggunakan ajax?