Selasa, 02 April 2013

Sebelumnya saya membuat artikel mengenai Ajax Upload pada CodeIgniter dan kali ini saya membuat pengembangan dari artikel tersebut.

Sebenarnya Multiple Upload pada library bawaan codeigniter tidak sebenarnya di dukung, sebab jika inputan yang di upload berbentuk array maka CI_Upload menolaknya. Oleh sebab itu di sini saya membuat library yang meng-extends CI_Upload dimana pada bagian do_upload sedikit di rubah. do_upload yang ada pada library baru itu sendiri saya ambil dari CI_Upload. Bagaimana penerapannya berikut saya jelaskan.

Buat controller atau disini saya pakai welcome.php dan kemudian isi dengan script 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']))
    {
        
        $data=$_FILES['image'];
        $total = count($data['name']);
        $data2=array();
        for($i=0; $i<$total; $i++)
        {
            $data2[]=array(
                'name'=>$data['name'][$i],
                'type'=>$data['type'][$i],
                'tmp_name'=>$data['tmp_name'][$i],
                'error'=>$data['error'][$i],
                'size'=>$data['size'][$i],
            );
        }
        
        $no=0;
        foreach($data2 as $row)
        {
            $config['upload_path'] = './assets/uploads';
            $config['allowed_types'] = 'gif|jpg|png|bmp';
            $this->load->library('multi_upload', $config);
            if($this->multi_upload->do_upload($data2[$no]))
            {
                $image_data = $this->multi_upload->data();
                
                echo img(array(
                    'src'=>base_url("assets/uploads/$image_data[file_name]"),
                    'width'=>300,
                    'style'=>'margin:10px; padding:10px; background:#bbb'
                )); 
            }
            $no++;
        }
    }    
}


Kemudian buat view, disini saya pakai welcome_message.php tambahkan script berikut

    <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 
                });
            });
            
            var count = 1;
            jQuery("#add_btn").click(function(){
                count += 1;
                jQuery('#fill').append('<tr class="records"><td><label>Foto '+count+' </label><input name="image[]" type="file" /> <a class="remove_item" href="#" >Delete</a></td></tr>');
            });
            
            jQuery(".remove_item").live('click', function (ev) {
                if (ev.type == 'click') {
                    jQuery(this).parents(".records").fadeOut();
                        jQuery(this).parents(".records").remove();
                }
            });
        }); 

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

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

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

    <div id="body">
        <div align="left" id="wrapper">
            
            <form action="<?php echo site_url('welcome/upload'); ?>" method="post" enctype="multipart/form-data" id="form-upload">
                <table>
                    <thead>
                        <tr>
                            <td><input type="button" name="add_btn" value="Add" id="add_btn"></td>
                        </tr>
                    </thead>
                    <tbody id="fill">
                        <tr>
                            <td><label>Foto 1</label> <input name="image[]" type="file" /></td>
                        </tr>
                    </tbody>
                    <tr>
                        <td><input type="submit" id="submit-button" value="Upload" /></td>
                    </tr>
                </table>
            </form>
            <div id="output"></div>
        </div>
    </div>

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

</body>
</html> 


dan terakhir buat library dengan nama multi_upload.php dan isi dengan script berikut

<?php

/**
 * Multi Upload
 *
 * @author        Dida Nurwanda
 * @email        dida_n@ymail.com
 */

require_once SYSDIR.'/libraries/Upload.php';

class multi_upload extends CI_Upload
{
    public function __construct($props = array())
    {
        parent::__construct($props);
    }
    
    public function do_upload($data=array())
    {
        if (!isset($data))
        {
            $this->set_error('upload_no_file_selected');
            return FALSE;
        }
        if (!$this->validate_upload_path())
            return FALSE;
        if (!is_uploaded_file($data['tmp_name']))
        {
            $error = ( ! isset($data['error'])) ? 4 : $data['error'];
            switch($error)
            {
                case 1:   
                    $this->set_error('upload_file_exceeds_limit');
                    break;
                case 2:
                    $this->set_error('upload_file_exceeds_form_limit');
                    break;
                case 3:
                    $this->set_error('upload_file_partial');
                    break;
                case 4:
                    $this->set_error('upload_no_file_selected');
                    break;
                case 6:
                    $this->set_error('upload_no_temp_directory');
                    break;
                case 7: 
                    $this->set_error('upload_unable_to_write_file');
                    break;
                case 8: 
                    $this->set_error('upload_stopped_by_extension');
                    break;
                default :   $this->set_error('upload_no_file_selected');
                    break;
            }
            return FALSE;
        }
        $this->file_temp = $data['tmp_name'];
        $this->file_size = $data['size'];
        $this->_file_mime_type($data);
        $this->file_type = preg_replace("/^(.+?);.*$/", "\\1", $this->file_type);
        $this->file_type = strtolower(trim(stripslashes($this->file_type), '"'));
        $this->file_name = $this->_prep_filename($data['name']);
        $this->file_ext     = $this->get_extension($this->file_name);
        $this->client_name = $this->file_name;
        if (!$this->is_allowed_filetype())
        {
            $this->set_error('upload_invalid_filetype');
            return FALSE;
        }
        if ($this->_file_name_override != '')
        {
            $this->file_name = $this->_prep_filename($this->_file_name_override);
            if (strpos($this->_file_name_override, '.') === FALSE)
                $this->file_name .= $this->file_ext;
            else
                $this->file_ext     = $this->get_extension($this->_file_name_override);
            if (!$this->is_allowed_filetype(TRUE))
            {
                $this->set_error('upload_invalid_filetype');
                return FALSE;
            }
        }
        if ($this->file_size > 0)
            $this->file_size = round($this->file_size/1024, 2);
        if (!$this->is_allowed_filesize())
        {
            $this->set_error('upload_invalid_filesize');
            return FALSE;
        }
        if (!$this->is_allowed_dimensions())
        {
            $this->set_error('upload_invalid_dimensions');
            return FALSE;
        }
        $this->file_name = $this->clean_file_name($this->file_name);
        if ($this->max_filename > 0)
            $this->file_name = $this->limit_filename_length($this->file_name, $this->max_filename);
        if ($this->remove_spaces == TRUE)
            $this->file_name = preg_replace("/\s+/", "_", $this->file_name);
        $this->orig_name = $this->file_name;
        if ($this->overwrite == FALSE)
        {
            $this->file_name = $this->set_filename($this->upload_path, $this->file_name);
            if ($this->file_name === FALSE)
                return FALSE;
        }
        if ($this->xss_clean)
        {
            if ($this->do_xss_clean() === FALSE)
            {
                $this->set_error('upload_unable_to_write_file');
                return FALSE;
            }
        }
        if ( ! @copy($this->file_temp, $this->upload_path.$this->file_name))
        {
            if ( ! @move_uploaded_file($this->file_temp, $this->upload_path.$this->file_name))
            {
                $this->set_error('upload_destination_error');
                return FALSE;
            }
        }
        $this->set_image_properties($this->upload_path.$this->file_name);
        return TRUE;
    }
} 
 
Selesai deh, mudah sekali bukan  :D

Berikut penampakannya.


Download
Password : didanurwanda.blogspot.com

16 komentar:

  1. thanks untuk share ilmu nya, tp mohon bantuan nya saya masih ada error ketika upload
    Fatal error: Call to undefined method multi_upload::_file_mime_type() in E:\xampp\htdocs\alpha\application\libraries\multi_upload.php on line 61

    mohon pencerahannya

    bravo

    BalasHapus
    Balasan
    1. Normal banget bro, udah di cek lagi tadi. malah nggak perlu setting apa2 lagi,

      Hapus
  2. maksud nya normal gimana bro ??? ane msh blum jelas, ane udah coba lagi script diatas, masih ada pesan error, dan gambar yg di upload juga blum success ke upload bro


    mohon pencerahannya bro

    bravo

    BalasHapus
    Balasan
    1. normal = bisa maksudnya, saya pake CodeIgniter 2.1.3 jalan, hanya tinggal copy folder tersebut kedalam folder CodeIgniter_2.1.3 dan pilih replace, selebihnya tidak perlu setting apa2 lagi.

      ini CI 2.1.3 https://github.com/EllisLab/CodeIgniter/tree/2.1.3
      soalnya di halaman depan itu CI 3 dan masih beta.

      Hapus
  3. thanks bro untuk info nya

    ane juga pake CI 2.1.3 bro tp hasil masih sama......kalo ane browsing" ke google error tsb library multi_upload nya untuk "$this->_file_mime_type($data);" yg gak kepanggil.....punya pencerahan lg bro buat kasus ane.....


    sebelum nya thanks ya bro

    BalasHapus
    Balasan
    1. errornya sih tau, tapi gimana mau benerinya lah disini jalan normal kok. nih coba yang udah lengkap http://www.4shared.com/zip/EPfVhcUQ/upl.html

      Hapus
  4. mangap bro.....baru bisa say thanks


    izin sedot bro....meluncur ke tkp


    Thanks

    Bravo

    BalasHapus
  5. makasi banget iilmunya gann,, tapi mau nanya kalo mau echo url tempat simpen file yang ditampilinnya apa yang musti d echo d tampilannya ya gan??
    makasi gan.,

    BalasHapus
    Balasan
    1. itu sih cuma contoh aja bro, biar simpel.
      kalo nampilin sih bisa dimana aja + di apain aja tergantung selera.

      Hapus
  6. maaf ni gan, mohon maaf sebelumnya, script ini kalau di localhost bisa jalan sempurna, tapi lok di webhosting gak bisa jalan ya gan..??

    BalasHapus
  7. mas dinda, kalo tanpa add form, tapi sekaligus 5 file dalam 1 form upload gimana??

    BalasHapus
  8. thank you ilmu nya gan . tapi izin tanya , jika memakai CI versi 2.1.4 , ketika klik upload , file image nya gak bisa keluar . mohon pencerahan nya gan
    thank you :)

    BalasHapus
  9. Broo... kalau nama imagenya mau kita simpan ke database gimana?

    BalasHapus

Mohon tidak mencantumkan URL pada komentar yang bersifat promosi.