Oke bro, udah lama nih gw gak bikin tutorial. Hari ini dan beberapa bulan ke depan, gw akan mulai mencoba membuat blog ini ke arah yang lebih baik (maksudnya kembali ke jalan blog programmer). Jadi disini gw akan membuat komposisi mengenai tutorial programming khususnya pemrograman web. Nah, hari ini gw akan mencoba menulis untuk multiple file upload. Simak kodingnya dengan baik ya hehe.. Pertama-tama kita buat dulu htmlnya. Kita pake tag html 5 biar makin unyu ya hehehe.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <title>Multiple Upload Files</title> <style> .input_upload{ width:100px; margin-top:-24px; } </style> </head> <body> <form action="<?php $_SERVER['PHP_SELF'] ?>" method="post" enctype="multipart/form-data"> <div style="margin-left:225px;"> <button class="add_plus">+</button> <button class="remove_min">-</button> </div> <div class="input_upload"> <input type="file" name="upload_files[]" id="first_clone"/> </div> <div> <input type="submit" value="submit" name="submit_files"> </div> </form> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html lang="en"> <head> <title>Multiple Upload Files</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('.add_plus').click(function(e){ e.preventDefault(); var input = $('#first_clone'); var clone = input.clone(true); //kloning browse input clone.removeAttr('id'); //hapus atribut id karena id hanya boleh 1 clone.val('');//kosongkan value browse input yang di klone clone.appendTo('.input_upload'); //masukkan ke dalam }); $('.remove_min').click(function(e){ e.preventDefault(); if($('.input_upload input:last-child').attr('id') != 'first_clone'){ $('.input_upload input:last-child').remove(); } }); }); </script> <style> .input_upload{ width:100px; margin-top:-24px; } </style> </head> <body> <form action="<?php $_SERVER['PHP_SELF'] ?>" method="post" enctype="multipart/form-data"> <div style="margin-left:225px;"> <button class="add_plus">+</button> <button class="remove_min">-</button> </div> <div class="input_upload"> <input type="file" name="upload_files[]" id="first_clone"/> </div> <div> <input type="submit" value="submit" name="submit_files"> </div> </form> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<?php if(isset($_POST['submit_files'])) { //gunakan foreach untuk melakukan cek setiap isi array foreach($_FILES['upload_files']['name'] as $key => $value) { //Jika file berhasil diupload dengan baik dan tanpa error if(is_uploaded_file($_FILES['upload_files']['tmp_name'][$key]) && $_FILES['upload_files']['error'][$key] == 0) { //Penamaan filename dengan menggunakan timestamp $filename = $_FILES['upload_files']['name'][$key]; $filename = time().rand(0,999)."_".$filename; //Cek jika file berhasil dipindahkan ke tempat yang telah kita sediakan if(move_uploaded_file($_FILES['upload_files']['tmp_name'][$key], 'uploads/'. $filename)) { echo 'File ' . $filename.' berhasil di upload <br/>'; } else { echo move_uploaded_file($_FILES['upload_files']['tmp_name'][$key], 'uploads/'. $filename); echo 'File tidak berhasil dipindahkan.'; } } else { echo "Gagal melakukan upload"; } } } ?> <!DOCTYPE html> <html lang="en"> <head> <title>Multiple Upload Files</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('.add_plus').click(function(e){ e.preventDefault(); var input = $('#first_clone'); var clone = input.clone(true); clone.removeAttr('id'); clone.val(''); clone.appendTo('.input_upload'); }); $('.remove_min').click(function(e){ e.preventDefault(); if($('.input_upload input:last-child').attr('id') != 'first_clone'){ $('.input_upload input:last-child').remove(); } }); }); </script> <style> .input_upload{ width:100px; margin-top:-24px; } </style> </head> <body> <form action="<?php $_SERVER['PHP_SELF'] ?>" method="post" enctype="multipart/form-data"> <div style="margin-left:225px;"> <button class="add_plus">+</button> <button class="remove_min">-</button> </div> <div class="input_upload"> <input type="file" name="upload_files[]" id="first_clone"/> </div> <div> <input type="submit" value="submit" name="submit_files"> </div> </form> </body> </html> |