Friday, February 15, 2013

Membuat multiple upload file

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.
<!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>
Oke, sekarang kita baru buat javascriptnya.. jadi bentuk kodingnya adalah seperti berikut.
<!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>
Nah, sekarang bagian yang terakhir adalah server side scriptingnya.
<?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>
Demikianlah tutorial multiple file upload. simple kan ya? sampai ketemu lagi di tutorial keren lainnya hehe.,

0 comments: