Membuat Multiple Upload Images Dengan Dropzone.js Dan Codeigniter

byNicht Menschen - 17
Multiple Upload Images Dengan Dropzone.js Dan Codeigniter



Sudah lama saya tidak menulis di blog, untuk kali ini saya akan berbagi seputar cara membuat multiple upload images dengan dropzone.js dan codeigniter . Dropzone js adalah salah satu libraries untuk memudahkan kita dalam pembuatan upload atau multi upload gambar. Libraries ini memiliki kelebihan yaitu salah satunya fasilitas drag and drop files to upload (or click) .tanpa berlama-lama lagi kita langsung saja praktek.
download file master dropzone.css dan dropzone.js nya disini
(download saja semua file masternya yang ada di github)
    Spesifikasi
    • dropzone js dan css 
    • codeigniter 2.1.4 (Available Codeigniter 2.2.0) 
    • Xampp 1.8.0 (php 5.4.4)

    Create Database (buatlah DB jika anda ingin menyimpan data gambar pada mysql)

    Nama database : dropzone
    Nama tabel : gambar
    Buat field seperti gambar dibawah ini :

    dropzone table images upload


    Set Config
    • edit sintak autoload.php pada folder config :
      • [Jika Memakai Database] pada baris 55 ,ubah jadi seperti ini :
        • $autoload['libraries'] = array('database');
      • pada baris 67 ,ubah jadi seperti ini :
        • $autoload['helper'] = array('url', 'file','html','form');
    • edit sintak config.php pada folder config :
      • pada baris 55 ,ubah jadi seperti ini :
        • $http = 'http' . ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') ? 's' : '') . '://';
        • $newurl = str_replace("index.php","", $_SERVER['SCRIPT_NAME']);
        • $config['base_url']    = "$http" . $_SERVER['SERVER_NAME'] . "" . $newurl;
    • [Jika Memakai Database] edit sintak database.php pada folder config :
      • pada baris 51 , ubah jadi seperti ini :
        • $db['default']['hostname'] = 'localhost';
        • $db['default']['username'] = 'root';
        • $db['default']['password'] = '';
        • $db['default']['database'] = 'dropzone_img';
        • $db['default']['dbdriver'] = 'mysql';
      • pada bagian ini anda bisa atur nama databases sesuai nama database yang anda buat.
    • edit sintak routes.php pada folder config :
      • pada baris 41 ,ubah jadi seperti ini :
        • $route['default_controller'] = "upload_img";
    Set Controllers
    • sintak controllers upload_img.php :
    <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

 class Upload_Img extends CI_Controller {

  

  public function __construct() {

  parent::__construct();

   $this->load->helper(array('url','html','form'));

  }

  

  public function index() {

   $this->load->view('uploadimg');

  }

  

  public function upload() {

   if (!empty($_FILES)) {

    $tempFile = $_FILES['file']['tmp_name'];

    $fileName = $_FILES['file']['name'];

    $fileType = $_FILES['file']['type'];

    $fileSize = $_FILES['file']['size'];

    $targetPath = './assets/uploads/';

    $targetFile = $targetPath . $fileName ;

    move_uploaded_file($tempFile, $targetFile);

    // jika anda ingin menyimpannya ke dalam database

    // berikut adalah contoh model sederhana untuk menyimpan kdalam database.

    

    // sintak untuk menyimpan ke database :

    //$this->db->insert('master',array('type' => $fileType, 'nama' => $fileName, 'ukuran' => $fileSize));

     }

  }

 }

?>



    Set Views
    • sintak views uploadimg.php :
    <html>

<head>

<title>Multiple Upload Images</title>
<!-----di bagian ini anda bisa menyesuaikan sendiri tergantung dimana tempat file JS dan CSS nya di letakan ----->

<link href="<?php echo base_url('assets/dropzone/'); ?>/css/dropzone.css" type="text/css" rel="stylesheet" />

</head>

<body>

<h2>Simple Multiple Upload Images for dropzone.js and Codeigniter - By Cahya Dyazin</h2>

<form action="<?php echo site_url('/upload_img/upload'); ?>" class="dropzone" >

</form>

</body>
<script src="<?php echo base_url('assets/dropzone'); ?>/dropzone.js"></script>

</html>


    sebelumnya saya ucapkan terimakasih, semoga artikel ini bisa membantu :)

    Tags

    Diposting oleh Nicht Menschen

    17/Post a Comment/Comments

    1. Ekalaya Manullang14 Januari 2015 pukul 03.49

      parameter untuk insert ke db nya kurang greget om :D

      BalasHapus
      Balasan
      1. Cahya Dyazin14 Januari 2015 pukul 06.40

        greget gimana nih ?
        hmm di sini aku membahas sesuatu yang sederhana aja, biar mudah di cerna :)

        Hapus
    2. Ekalaya Manullang14 Januari 2015 pukul 03.50

      untuk menambahkan watermark dan resize bisa dibuat dijquerynya aja gak om?

      BalasHapus
      Balasan
      1. Cahya Dyazin14 Januari 2015 pukul 06.42

        hmm dropzone udah bagus ketimbang jquery gan,,,,
        dropzone di khususkan untuk melakukan upload file gambar aja setauku,,,

        Hapus
    3. Ekalaya Manullang14 Januari 2015 pukul 03.51

      trus apa lagi ya biar sampai 6 komentar ini :D

      BalasHapus
    4. Ekalaya Manullang14 Januari 2015 pukul 03.51

      eh harus 15 komentar ternyata biar aktif link downloadnya :D

      BalasHapus
      Balasan
      1. Ekalaya Manullang27 Januari 2015 pukul 02.40

        thanks banyak ya om.. buat latihan multiupload image :-)

        Hapus
      2. Cahya Dyazin27 Januari 2015 pukul 06.42

        sama sama gan :)
        semoga bermanfaat :)

        Hapus
    5. muhamad nasir31 Agustus 2015 pukul 09.09

      Gan artikelnya bagus, tapi saya masih bingung..
      gmana caranya di tablenya di tambah keterangan tentang gambar tersebut dan setiap satu data di tablenya terdapat beberapa image yang di upload..? maaf masih mencoba :D

      BalasHapus
    6. openIT10 November 2015 pukul 11.11

      ada tambahan seperti crop, resize gak bang

      BalasHapus
      Balasan
      1. Cahya Dyazin10 November 2015 pukul 11.16

        kalau dari bawaan dropzone nya sendiri belum ada kalau untuk crop, mungkin agan bisa kombinasiin pake jqcrop kalada mmau fitur crop

        Hapus
    7. openIT12 November 2015 pukul 15.08

      ini artikel keren habis,, tapi kok aku masih bingung cara gunainnya

      masih aku tanya lagi seperti ini gambar nya https://ndesostyle.files.wordpress.com/2015/11/tanya-lagi.png

      BalasHapus
      Balasan
      1. Cahya Dyazin12 November 2015 pukul 20.37

        bingung kenapa ?
        emng pengen di costume seperti apa dropzone nya ?

        Hapus
    8. kiki31 Agustus 2016 pukul 05.30

      mas mau tanya, gimana caranya saya edit dan hapus gambar yang sudah saya upload ?
      mohon pencerahannya. terima kasih.

      BalasHapus
      Balasan
      1. Nicht Menschen31 Agustus 2016 pukul 09.33

        di tutorial ini cuma bahas uploadnya saja, kalau mau edit atau hapus di php ada fungsi namanya unlink(), coba pelajari itu

        Hapus
    9. Kumpulan Artikel15 Februari 2018 pukul 15.59

      muncul error
      request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested

      BalasHapus
      Balasan
      1. Nicht Menschen15 Februari 2018 pukul 16.03

        Server side & client side-nya dalam satu localhost atau bukan?

        Hapus

    Posting Komentar

    Lebih baru Lebih lama