Cara Mengupload Banyak Gambar Sekaligus Menggunakan HTML dan PHP
Tuesday, March 21, 2017
Mengupload atau mengunggah gambar mungkin sudah bisa dibilang sangat mudah dilakukan oleh semua kalangan website developer walaupun masih pemula. Namun, bagaimana jika mengupload atau mengunggah gambar dalam jumlah banyak? Jika kita lakukan satu per satu maka hal ini akan menyita banyak waktu tentunya.
Dari ulasan awal di atas, terlihat jelas bahwa mengupload atau mengunggah gambar secara bersamaan memiliki keuntungan. Sehingga informasi ini layak untuk dibahas pula. Lalu bagaimana cara mengupload atau mengunggah gambar secara bersamaan sekaligus? Berikut penjelasannya.
Sebelum masuk ke inti pembahasan, terlebih dahulu disampaikan bahwa komputer yang dipakai untuk praktek ulasan ini telah terinstal software web server (misalnya XAMPP atau AppServ). Dalam ulasan ini, web server yang dipakai adalah AppServ. Setelah komputer terpasang web server, kita lanjut ke inti pembahasan.
Untuk mengupload atau mengunggah banyak gambar sekaligus, berikut langkah-langkahnya:
Pertama, buatlah folder web dalam folder WWW misalkan bernama MULTIUPLOAD. Untuk pemakai XAMPP buatlah folder di HTDOCS.
Selanjutnya, buatlah folder dan beri nama PICTURES yang nantinya akan digunakan sebagai tempat gambar di upload atau diunggah.
Selanjutnya, buatlah file 'index.php' dalam folder MULTIUPLOAD, bukalah file 'index.php' kemudian tambahkan kode struktur HTML seperti berikut:
<html><head></head><body></body></html>
Selanjutnya, tambahkan kode berikut di antara tag <head> dan </head>
<title>MULTI UPLOAD - suruhbelajar.blogspot.com</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
Skrip di atas digunakan untuk memanggil file jQuery yang akan digunakan untuk mengaktifkan fungsi multiupload. Selanjutnya, tambahkan kode berikut di antara tag <body> dan </body>
<h1>MULTI UPLOAD</h1>
<form name="form" method="post" enctype="multipart/form-data"><div style="margin-left:5px;"><button class="add_plus btn">+</button> <button class="remove_min btn">-</button> <input type="submit" name="simpan" value="Upload"></div><div class="input_upload" style="width:100%; margin-top:20px;"><table id="first_table"><tr><td><input value="Pilih foto yang ingin diupload" type="file" name="upload_files[]"/></td></tr></table></div></form>
Kode di atas digunakan sebagai interface proses upload gambar. Selanjutnya, tambahkan kode berikut sebelum </body> yang berfungsi untuk menambah dan atau mengurangi gambar yang diupload.
<script type="text/javascript">
$(document).ready(function(){$('.add_plus').click(function(e){e.preventDefault();var input = $('#first_table');var clone = input.clone(true);clone.removeAttr('id');clone.val('');clone.appendTo('.input_upload');});$('.remove_min').click(function(e){e.preventDefault();if($('.input_upload table:last-child').attr('id') != 'first_table'){$('.input_upload table:last-child').remove();}});});</script>
Selanjutnya, tambahkan file jQuery pada folder MULTIUPLOAD. Dalam pembahasan ini, jQuery yang digunakan versi 1.7.2 (jquery-1.7.2.js).
Terakhir, tambahkan kode berikut untuk proses upload atau unggah banyak gambar sekaligus:
password terletak di bawah artikel
<?phpif(isset($_POST['simpan'])){//saving photoforeach($_FILES['upload_files']['name'] as $key => $value){ if(is_uploaded_file($_FILES['upload_files']['tmp_name'][$key]) && $_FILES['upload_files']['error'][$key] == 0) { //Ambil Post $tgl = date("YmdHis"); //Penamaan filename dengan menggunakan timestamp $filesize = $_FILES['upload_files']['size'][$key]; $filename = $_FILES['upload_files']['name'][$key]; $split = explode('.', $filename); $ext = $split[count($split) - 1]; $filename = time().rand(0,999).".".$ext; $filename = str_replace(' ','_',$filename);
if ( ! is_dir('pictures/') ) { mkdir('pictures/'); } //Cek jika file berhasil dipindahkan ke tempat yang telah kita sediakan if(move_uploaded_file($_FILES['upload_files']['tmp_name'][$key], 'pictures/'. $filename)) { echo "Gambar ".$filename." berhasil diupload.<br/>"; }else{ echo"Gagal<br/>"; } }else{ echo"Gagal<br/>"; }}}?>
Selanjutnya, buka browser dan ketik 'localhost/multiupload' pada address bar dan lihat tampilannya.
Pilih tanda plus (+) untuk menambahkan gambar yang akan diupload, atau pilih tanda minus (–) untuk mengurangi gambar yang akan diupload.
Pilih beberapa gambar yang akan diupload, kemudian pilih tombol Upload. Kemudian periksa folder PICTURES apakah semua gambar berhasil diupload semua.
Bagaimana sahabat pembaca? mudahkan! Seperti itulah cara mengupload banyak gambar sekaligus menggunakan HTML dan PHP. Namun, terkadang jika kita mengupload gambar dalam jumlah banyak padahal setiap gambar memiliki resolusi yang tinggi sehingga kapasitasnya juga tinggi dapat menyebabkan proses upload yang lama. Bahkan, bisa lebih buruk lagi proses upload akan mengalami kegagalan. Untuk itu diperlukan pembatasan ukuran gambar yang diijinkan untuk proses upload.
Lalu, bagaimana cara membatasi ukuran gambar yang akan diupload? Hal ini akan dibahas pada kesempatan berikutnya. Jadi, tunggu ya..
Terima kasih telah meluangkan waktu untuk membaca artikel sederhana ini, semoga memberikan manfaat kepada kita semua. Untuk contoh project dapat sahabat unduh melalui link yang tersedia pada tengah artikel.
Pesan, saran, dan kesan serta pertanyaan dapat sahabat kirim melalui komentar. Ditunggu ya!
Password:suruhbelajar.blogspot.com
Comments for this post
