Ticker

10/recent/ticker-posts

Ad Code

Responsive Advertisement

MultiUpload File Dengan dropzonejs [Codeigniter]

H4nk April 09, 2016

Pada artikel berikut ini saya akan memberikan contoh melakukan Multi Upload dengan Dropzonejs, kenapa menggunakan Dropzonejs ? menurut saya ini sangat mudah dan tampilan juga bagus dan ngk pake ribet, sebenarnya menggunakan Jquery dll juga bisa cuma disini saya akan memberikan petunjuk untuk dropzonejs. Dropzonejs adalah salah satu libraries untuk memudahkan kita dalam pembuatan upload atau multi upload gambar.jadi lib ini khusus untuk upload-upload saja :D.
Sebelumnya script akan saya berikan perpotong bukan script yang hasil dari print screen saya yah, karena scriptnya bukan untuk umum.
Oke bahan yang kita butuhkan cukup mudah, sebelumnya kita membutuhkan 2 file yang berjenis js dan css yang bernama :
dropzone.css dan dropzone.js 
file ini dapat kita download langsung dari situsnya http://www.dropzonejs.com/.
dan pada script ini saya menggunakan Framework Codeigniter 3.0.6 yang mana dapat kita download di sini : http://www.codeigniter.com/.
jika semua file sudah lengkap, simpan pada file asset anda atau menggunakan nama terserah anda bikin.
ok lanjut pada tahapan codingannya step by step nya adalah :
1. Kita akan terlebih dahulu membuat file Controller
sebagai contoh saya akan membuat file controller dengan bernama "File.php"
pada bagian function index kita buatkan file view yang mana akan mengarah pada direktori view, script untuk Function Indexnya adalah :
public function index()
{
$this->load->view('upload_file');

}
 lalu kita akan membuat function "upload", yang mana fungsi ini akan menjadi proses upload filenya. disni saya akan memberikan fungsi yang tidak terlalu banyak setingan.
public function upload() {
   if (!empty($_FILES)) {
    $tmpfile = $_FILES['file']['tmp_name'];
    $nama_file= $_FILES['file']['name'];
    $tipe_file= $_FILES['file']['type'];
    $ukuran_file = $_FILES['file']['size'];
    $lokasi= './upload_file/';
    $targetFile = $lokasi. $nama_file;
    move_uploaded_file($tempFile, $targetFile);
$in['file_type'] = $tipe_file;
$in['file_name'] = $nama_file;
$in['file_size'] = $ukuran_file ;
$this->db->insert('file', $in);
     }
  } 
keterangan pada controller ini adalah :
pada baris yangdikasih warna kuning  setting pada file upload
pada warna hijau variabel yang disimpan sementara.
pada warna biru direktori tempat file upload yang akan disimpan, sesuai dengan direktori anda.
pada warna pink ini adalah proses untuk penyimpanan kedalam database, jadi sesuai dengan nama field dan tabel masing-masing.
lalu untuk file viewnya akan diberi nama upload_file.php
<html> <head> <link href="<?php echo base_url('asset/dropzone/'); ?>dropzone.css" type="text/css" rel="stylesheet" /> </head> <body>  <form action="<?php echo site_url('File/upload'); ?>" class="dropzone" >  </form> </body> <script src="<?php echo base_url('asset/dropzone/'); ?>dropzone.js"></script></html>
 sekarang save semua file dan coba lakukan upload file. jika file berhasil masuk kedalam direktori yang sudah kita tentukan maka script ini sukses. masih banyak setting yang harus kita lakukan, seperti melakukan filter maximal size yang dapat di upload, file type apa saja yang boleh di upload. tunggu tutorial selajutnya untuk settingan tersebut.
Berikut hasil yang sudah saya upload.
Pada File Manager adalah dropzone js nya
Proses Upload sedang berlangsung.
sekian artikel semoga bermanfaat.
H4nk

Diposting oleh H4nk

Posting Komentar

2 Komentar

  1. Fery isniady6 Februari 2020 pukul 09.59

    selamat pagi,, maaf mohon bantuannya,, jika file yang diupload diajdikan dalam satu kolom dengan IMPLODE bisa gk y?? jd tidak insert per id image nya,,, terima kasih....

    BalasHapus
  2. H4nk8 Februari 2020 pukul 23.04

    bisa dijadikan dalam 1 kolom dengan menggunakan function implode, tpai musti dikasih pemisah antar file, seperti , . atau spasi. nanti saat ditampilkan di proses dengan explode

    BalasHapus

Berikan Komentar yang bermanfaat dan sehat.