Multiple Upload Image dengan Codeigniter

Upload image merupakan fitur penting dalam sebuah halaman website. Apalagi bagi anda yang fokus pada backend development.

Bagi developer web upload image merupakan fitur wajib yang harus dimiliki oleh suatu halaman website di era modern ini.

Codeigniter merupakan framework (kerangka kerja) PHP yang banyak digunakan saat ini. Selain mudah digunakan, memiliki library dan helper yang lengkap juga bersifat tidak mengikat.

Pada kesempatan kali ini, penulis ingin sharing tentang bagaimana mengupload multiple/banyak image dalam satu kali upload.

Hal ini tentunya bermanfaat bagi anda yang ingin membuat sebuah website seperti e-commerce, real estate, dan sebagainya.

Untuk mengupload image menggunakan codeigniter, kita membutuhkan sebuah library upload. Dimana library ini sudah include dalam paket codeigniter jadi, tinggal dipanggil saja.

Selain menggunakan libary upload kita juga menggunakan looping (perulangan), mengingat kita akan mengupload multiple image dalam waktu bersamaan.

Untuk style, disini saya menggunakan BOOTSTRAP. Bagi anda yang belum kenal dengan bootstrap silahkan kunjungi official websitenya (www.getbootstrap.com).

Ok, tanpa basa-basi lagi mari kita lanjut ke proses pembuatan bagaimana membuat multiple image menggunakan codeigniter.

1. Install codeigniter

Extract codeigniter ke www (jika menggunakan wampserver) atau htdocs (jika menggunakan XAMPP). Kemudian rename project codeigniter anda sesuai dengan project Anda. Disini penulis memberi nama ci_multiupload.

Setelah installasi, buat folder assets dan sertakan file bootstrap didalam folder assets. Kemudian buat folder images didalam folder assets. Sehingga terlihat struktur project kita seperti berikut:

aplication
assets
      css
      fonts
      images
      js
system

Folder css, fonts, dan js adalah folder untuk bootstrap. Sedangkan folder images ini nantinya kita gunakan untuk menampung images yang di upload.

Jika anda masih bingung dengan penjelasan diatas, jangan khawatir anda bisa mempelajarinya pada source code yang telah saya sediakan diakhir tutorial ini.

2. Konfigusai beberapa file berikut:

Buka application/config/autoload.php atur menjadi seperti berikut:

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');

Buka application/config/config.php dan atur menjadi seperti berikut:

$config['base_url'] = 'http://localhost/ci_multiupload/';

3. Buat controller dengan nama Upload.php dengan kode sebagai berikut:

<?php
class Upload extends CI_Controller{
        function __construct(){
                parent::__construct();

        }
        function index(){
                $this->load->view('v_upload');
        }
        function upload_image(){
                $config['upload_path'] = './assets/images/'; //path folder
            $config['allowed_types'] = 'gif|jpg|png|jpeg|bmp'; //type yang dapat diakses bisa anda sesuaikan
            $config['encrypt_name'] = TRUE; //nama yang terupload nantinya

            $this->load->library('upload',$config);
            for ($i=1; $i <=5 ; $i++) { 
                if(!empty($_FILES['filefoto'.$i]['name'])){
                        if(!$this->upload->do_upload('filefoto'.$i))
                                $this->upload->display_errors();  
                        else
                                echo "Foto berhasil di upload";
                }
            }
                                
        }
}

4. Buat view dengan nama v_upload.php dengan kode sebagai berikut:

<!DOCTYPE html>
<html>
<head>
        <title>Multiple Upload</title>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
</head>
<body>
<div class="container">
        <h2>Multiple Upload</h2>
        <form action="<?php echo base_url().'index.php/upload/upload_image'?>" method="post" enctype="multipart/form-data">
                <?php for ($i=1; $i <=5 ; $i++) :?>
                        <input type="file" name="filefoto<?php echo $i;?>"><br/>
                <?php endfor;?>
                <button type="submit" class="btn btn-primary">Upload</button>
        </form>
        <script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
</div>
</body>
</html>

5. Kunjung URL (http://localhost/ci_multiupload/index.php/upload).

Kemudian upload beberapa gambar. Jika upload berhasil maka akan tampil pesan “Foto berhasil di upload”

Ok, sahabat programmer. Sekian tutorial tentang bagaimana membuat multiple upload dengan codeigniter. Jangan lupa share siapa tahu tutorial ini bermanfaat untuk teman Anda!

Download Source

Komentar (9)

Fahmi, 05 August 2017 16:02 - Reply

Mantap kang.

M Fikri, 15 January 2018 20:44 - Reply

Thanks you kang.!

Ilham, 13 June 2018 17:06 - Reply

Kalau untuk multiple upload file berupa pdf gimana ya ?

Donald, 26 June 2018 18:31 - Reply

Saya banyak belajar dari tutorial kang Fikri, tks sukses selalu

agus sulistiono, 07 July 2018 13:03 - Reply

mas fikri mau nanya nih saya ada kasus, gimana caranya upload multi foto dengan size yang berbeda? timakasih mas

Cinta Dewi Amelia, 17 July 2018 11:18 - Reply

Kalau banyak upload sekaligus rename gimana ya?

annas, 14 December 2018 14:51 - Reply

assalamuallaikum bang, tutorialnya bagus ,,, , kalau mau di export ke word (tersusun), kira" bisa dibuatkan tutornya kah ... Terimakaish .. :D sukses terus bang fikri ...