Selasa, 02 April 2013

4/02/2013
5
Sebenarnya yang di bahas pada artikel ini adalah Ajax Image Upload, tetapi jika Anda ingin menerapkannya pada File Upload juga sama, hanya sedikit penambahan pada function upload di controller. Ajax Image Upload yang ada pada artikel ini masih sangat sederhana dan saya yakin Anda dapat menyempurnakannya agar lebih baik lagi. Sebelum berlanjut pada coding, sebelumnya Anda download jQuery dan jQuery Form sebagai library javascript kemudian simpan pada folder assets/js

Karena ini hanya contoh, saya menggunakan controller welcome.php yang telah terdapat pada project CodeIgniter. Kemudian tambahkan script seperti berikut.

public function __construct()
{
    parent::__construct();
    $this->load->helper(array('html','url')); 
}
    
public function index()
{
    $this->load->view('welcome_message');
}

public function upload()
{
    if(isset($_FILES['image']))
    {
        $config['upload_path'] = './assets/uploads';
        $config['allowed_types'] = 'gif|jpg|png|bmp';
        $this->load->library('upload', $config);
        if($this->upload->do_upload('image'))
        {
            $image_data = $this->upload->data();
           
            echo img(array(
                'src'=>base_url("assets/uploads/$image_data[file_name]"),
                'width'=>600,
                'style'=>'margin-top:10px; padding:10px; background:#bbb'
            )); 
        }
    }   
}

Perhatikan lokasi upload, pada contoh ini saya simpan pada folder assets/uploads
Kemudian pada views/welcome_message.php

    <script type="text/javascript" src="<?php echo base_url('assets/js/jquery-1.7.2.min.js'); ?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/js/jquery.form.js'); ?>"></script>
    <script type="text/javascript"> 
        jQuery(document).ready(function() { 
            jQuery('#form-upload').on('submit', function(e) {
                e.preventDefault();
                jQuery('#submit-button').attr('disabled', ''); 
                jQuery("#output").html('<div style="padding:10px"><img src="<?php echo base_url('assets/images/loading.gif'); ?>" alt="Please Wait"/> <span>Mengunggah...</span></div>');
                jQuery(this).ajaxSubmit({
                    target: '#output',
                    success:  sukses 
                });
            });
        }); 

        function sukses()  { 
            jQuery('#form-upload').resetForm();
            jQuery('#submit-button').removeAttr('disabled');

        } 
    </script> 
</head>
<body>

<div id="container">
    <h1>CodeIgniter Ajax Upload <span style="float:right">Dida Nurwanda</span></h1>

    <div id="body">
        <div align="center" id="wrapper">
            <form action="<?php echo site_url('welcome/upload'); ?>" method="post" enctype="multipart/form-data" id="form-upload">
                <input name="image" type="file" />
                <input type="submit" id="submit-button" value="Upload" />
            </form>
            <div id="output"></div>
        </div>
    </div>

    <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>

Hehe simpel kan. Saya nggak mau jelasin fungsi masing-masing komponen, sebab saya yakin Anda pun telah memahaminya. Dan untuk jelasnya silahkan download scriptnya di bawah ini.

Berikut penampakannya

Download
Password : didanurwanda.blogspot.com

5 komentar:

Mohon tidak mencantumkan URL pada komentar yang bersifat promosi.