Cara Membuat Mengunggah Banyak Gambar dengan PHP AJAX Bootstrap

Sesuai request dari beberapa teman-teman dari salah satu komunitas pemograman di media sosial. Saya akan coba menjelaskan step by step mengenai cara membuat Mengunggah Banyak Gambar dengan menggunakan PHP, AJAX, dan Bootstrap. Catatan ini adalah pengembangan dari catatan sebelumnya mengenai Cara Membuat Mengunggah Gambar dengan PHP AJAX dan MYSQL

STEP 1 – Persiapan

1. Download JQUERY :Klik Disini
   Bingung cara downloadnya? klik disini untuk melihat caranya.
2. Download jquery.form.js :Klik Disini
   Bingung cara downloadnya? klik disini untuk melihat caranya.
3. Download Bootstrap :Klik Disini
   Bingung cara downloadnya? klik disini untuk melihat caranya.
4. Buat sebuah folder baru dengan namamultiple_upload, lalu simpan pada folder xampp/htdocs/.
5. Buat sebuah folder dengan namacss, lalu simpan pada folder xampp/htdocs/multiple_upload/.
6. Buat sebuah folder dengan namajs, lalu simpan pada folder xampp/htdocs/multiple_upload/.
7. Esktrak file7z yang telah didownload tadi.
8. Copy and paste folderfonts dari folder bootstrap yang telah diekstrak tadi ke folder xampp/htdocs/multiple_upload/.
9. Copy and paste filemin.css dari folder bootstrap/css/ yang telah diekstrak tadi ke folderxampp/htdocs/multiple_upload/css/.
10. Copy and paste filemin.js dari folder bootstrap/js/ yang telah diekstrak tadi ke folderxampp/htdocs/multiple_upload/js/.
11. Rename file JQUERY yang telah di downlaod tadi menjadimin.js, lalu copy and paste pada folderxampp/htdocs/multiple_upload/js/.

STEP 2 – View

Langkah selanjutnya adalah membuat 1 buah file yang berguna sebagai template utamanya. Buat sebuah file dengan namaindex.php, lalu simpan pada folder xampp/htdocs/multiple_upload/ :

Import Plugin JavaScript:

1. <script type=“text/javascript” src=“jquery.min.js”></script>
2. <script type=“text/javascript” src=“jquery.form.js”></script>

Sekarang tulis kode javasctript untuk pengiriman data menggunakan ajax dan menampilkan data gambar yang du upload

1. <script type=”text/javascript”>
2. $(document).ready(function(){
3. // Ketika melakukan pengambilan gambar
4. $(‘#images’).on(‘change’,function(){
5. // Memproses kiriman pengambilan gambar
6. $(‘#multiple_upload_form’).ajaxForm({
7. // Target untuk menampilkan gambar
8. target:’#images_preview’,
9. beforeSubmit:function(e){
10. $(‘.uploading’).show();
11. },
12. success:function(e){
13. $(‘.uploading’).hide();
14. },
15. error:function(e){
16. }
17. }).submit(); // Melakukan submit automatis
18. });
19. });
20. </script>

 

HTML : 

Masukan nama field file di definisikan sebagai sebuah array untuk menerima beberapa nama file dan juga digunakan beberapa atribut untuk beberapa dukungan unggahan

1. <!– Membuat form upload data/gambar –>
2. <form method=“post” id=“multiple_upload_form” enctype=“multipart/form-data” action=“upload.php”>
4. <!– Untuk mengecek apakah sedang di submit atau tidak –>
5. <input type=“hidden” name=“image_form_submit” value=“1”/>
7. <!– Mengambil gambar –>
8. <label>Choose Image</label>
9. <input type=“file” name=“images[]” id=“images” multiple >
10. </form>

Buat div target id yang didefinisikan di atas kode JavaScript. Gambar yang diunggah akan ditampilkan di div ini. Anda juga dapat mengubah div id ini, tapi ingat bahwa JavaScript nilai opsi target target: ‘# images_preview’akan sama dengan div id ini.

<div id=“images_preview”></div>

STEP 2 – Upload

Buat file upload.php yang berisi beberapa kode PHP untuk proses upload dan menghasilkan gambar tampilan.

1. <?php
2. $images_arr = array();
3. foreach($_FILES[‘images’][‘name’] as $key=>$val){
4. //upload dan mengambil gambar ke folder yang telah di buat
5. $target_dir = “uploads/”;
6. $target_file = $target_dir.$_FILES[‘images’][‘name’][$key];
7. if(move_uploaded_file($_FILES[‘images’][‘tmp_name’][$key],$target_file)){
8. $images_arr[] = $target_file;
9. }
10. }
11. ?>

Menampilkan Gambar

Setelah meng-upload gambar yang kita butuhkan dan di tampilkan. Ini akan di tampilkan ke div sasaran.

1. <?php
2. if(!empty($images_arr)){
3. foreach($images_arr as $image_src){ ?>
4. <ul>
5. <li >
6. <img src=”<?php echo $image_src; ?>” alt=””>
7. </li>
8. </ul>
9. <?php }
10. }
11. ?>

Source Code
Untuk mengunduh source code nya. Klik Disini
Bingung cara downloadnya? klik disini untuk melihat caranya.

Sekian untuk catatan kali ini. Semoga catatan ini bisa bermanfaat. Apabila ada yang ing ditanyakan, langsung tanyakan saja lewat form komentar dibawah ini. Terimakasih.