Learn To Code: Codeigniter

require:

codeigniter 3

demo

description:
Drag and select multi file and showing progres when upload with ajax and codeigniter

here is singgle page where load from view folder of codeigniter

<!doctype html>
<html>
<head>
    <link href="<?php echo base_url() ?>asset/bootsrap/css/bootstrap.min.css" rel="stylesheet">
  <script type="text/javascript" src="<?php echo base_url() ?>/asset/bootsrap/js/jquery.js"></script>
     <script src="<?php echo base_url() ?>asset/bootsrap/js/bootstrap.min.js"></script>
       <script src="<?php echo base_url() ?>asset/admin/bootstrap-filestyle.js"></script>
</head>
<body>
<div class="container">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" ><a href="#upload" aria-controls="upload" role="tab" data-toggle="tab">Upload</a></li>
    <li role="presentation" class="active"><a href="#galery" aria-controls="galery" role="tab" data-toggle="tab">Galery</a></li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in " id="upload">
 <br>
   <div id="files" class="row" rel="" >
    </div>
   <div id="holder" style="width:100%; height:200px; border: 5px dashed #ccc" id="holder">
  <div class="drag">Drag</div>
  <div class="drag or">or</div>
  <div class="drag">
   <input class="filestyle drag" type="file" id="userfile" name="userfile" multiple />
  </div>
   </div>
 </div>
    <div role="tabpanel" class="tab-pane fade in active" id="galery">..b.</div>
  </div>
</div >
</body>
</html>
 <style>
 .img-upload{
width:208px;
height:208px;
float:left;
background:#eee;
padding:5px 5px 5px 5px;
margin:3px;
 }
 .img-upload >img{
 display: block;
    display: block;
   margin: auto auto;
 
 }
 .box-opload{
 float:left;
 width:208px;
 float:left;
 margin:3px;
 }
 .progress{
 position:relative;
 top:-7px;
 width:200px;
 height:5px;
 margin-left:8px;

 }
 .progress >.progress-bar{
 height:4px;
 position:relative !important;
 bottom:0px;
 }
  #holder.hover { border: 10px dashed #0c0 !important; }
  .boxfile{
  align-items: center;
  display: flex;
  justify-content: center;
  top:50px;
  position:relative;
  height:40px;
  width:300px;
  }
  .drag{
  font-size:30px;
  color:#ccc;
   align-items: center;
  display: flex;
  justify-content: center;
  }

</style>
<script>
$(".filestyle").filestyle({input: false,buttonText: " pilih"});
var storedFiles = [];
$(document).ready(function() {
    $("#userfile").on("change", handleFileSelect); 
    var holder = document.getElementById('holder');
 holder.ondragover = function () { this.className = 'hover'; return false; };
 holder.ondragend = function () { this.className = ''; return false; };
 holder.ondrop = function (e) {
 this.className = '';
 e.preventDefault();
 var files = e.dataTransfer.files;
 var filesArr = Array.prototype.slice.call(files);
 
  aturfile(e,filesArr);
 }
    });
function aturfile(e,filesArr) {   
 var img = document.createElement("img");
 var jumlah = $("#files > .box-opload").length;
 var i  = 0+jumlah;
 filesArr.forEach(function(f) {  
  i++; 
  var html = "<div class='box-opload'><div class='img-upload' id='img"+i+"' ></div><div class='progress'><div id='p"+i+"' class='progress-bar progress-bar-striped progress-bar-info active'  role='progressbar' aria-valuenow='20' aria-valuemin='0' aria-valuemax='100' style='width: 1%;'></div></div></div>";
  
        $('#files').append(html);
   
   var ext = f.name.split('.').pop().toLowerCase();
   console.log(ext);
   
   if($.inArray(ext, ['gif','png','jpg','jpeg','rar','zip']) == -1) {
     var html = "<img id='"+i+"' src='<?php echo base_url(); ?>gambar/admin/invalid.png' data-file='"+f.name+"' class='selFile img-responsive' title='Click to remove'>";
               $('#img'+i).prepend(html);
      $('#p'+i).toggleClass("progress-bar-info progress-bar-danger");
       $('#p'+i+'').css("width","100%")
     return;
   }
   
            
   
   f.id = i;
            storedFiles.push(f);
   if($.inArray(ext, ['rar','zip'])>0) {
   var html = "<img id='"+i+"' src='<?php echo base_url(); ?>gambar/admin/rar.png' data-file='"+f.name+"' class='selFile img-responsive' title='Click to remove'>";
               $('#img'+i).prepend(html);
      $('#p'+i).attr("rel",f.name);
    $('#p'+i+'').css("width","15%")
   
   }else{
            var reader = new FileReader();
           reader.onload =gambarload.bind(reader,i,img,f);
     $('#p'+i+'').css("width","5%") 
            reader.readAsDataURL(f); 
   }
        });
  
  
  
  if($('#files').attr("rel")==="on"){}else{
   $('#files').attr("rel","on");

   submitFile(e,jumlah);
  }
  }      
 
 
function  gambarload(id,img,f,e){
  img.src = e.target.result;
        var canvas = document.createElement("canvas");
        //var canvas = $("<canvas>", {"id":"testing"})[0];
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        var MAX_WIDTH = 200;
        var MAX_HEIGHT =200;
        var width = img.width;
        var height = img.height;

        if (width > height) {
          if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
          }
        } else {
          if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
          }
        }
  $('#p'+id+'').css("width","10%")
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);

        var dataurl = canvas.toDataURL("image/png");
   var html = "<img id='"+id+"' src=\"" + dataurl + "\" data-file='"+f.name+"' class='selFile img-responsive' title='Click to remove'>";
               $('#img'+id).prepend(html);
      $('#p'+id).attr("rel",f.name);
    $('#p'+id+'').css("width","15%"); 

}
function submitFile(e,i){
  
   var data = new FormData();
   console.log(storedFiles[i]);
   if(!storedFiles[i]){
  $('#files').attr("rel","");
  return;
   }
   var ext = storedFiles[i].name.split('.').pop().toLowerCase();
  if($.inArray(ext, ['rar','zip'])>0){
   var formUrl = "<?php echo base_url(); ?>home/upload_file_rar/";
  }else{
   var formUrl = "<?php echo base_url(); ?>home/upload_file/";
  }
  var id= storedFiles[i].id;
        data.append('userfile', storedFiles[i]); 
        $.ajax({
                url: formUrl,
                type: 'POST',
                data: data,
                mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                processData: false,
    
                success: function(data, textSatus, jqXHR){
        var data = JSON.parse(data);
      if (data["status"]=="sukses"){
        console.log(data["info"]);
       $('#p'+id).css("width","100%") ;
       var selanjutnya= i+1;
       submitFile(e,selanjutnya)
      
      }
     
     
                     
                },
                error: function(jqXHR, textStatus, errorThrown){
                        //handle here error returned
                }
        });

   
}

function handleFileSelect(e) {
        var files = e.target.files;
        var filesArr = Array.prototype.slice.call(files);
 aturfile(e,filesArr);
}

</script>

and controller:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class home extends CI_Controller {
    public function __construct()
        {
            parent::__construct();
            $this->load->helper('url');
   $this->load->helper('link_aktif');
   $this->load->helper('show');
      $this->load->database();
   $this->load->model('tool_model');
   $this->load->helper(array('form', 'url'));
        }
 
 public function tes(){
 
 $this->load->view("tes");
 }
 
public function upload_file_rar(){
          $config['upload_path']          = './uploads/doc/';
                $config['allowed_types']        = '*';
                $config['max_size']             = 500000000000;
               
                $this->load->library('upload', $config);
                 if ( ! $this->upload->do_upload())
                {
     $error = array('error' => $this->upload->display_errors());
                    if (is_array($error)) {
      foreach ($error as $item) {
      $arr = array('info' => $this->upload->display_errors(),'status'=>"error");
      json_encode($arr);
      return  $arr;
      }
     }     
                }
                else
                {
     $image_data =$this->upload->data();
     $this->tool_model->resizes_thumb($image_data);
     $this->tool_model->resizes($image_data);
                     //echo $image_data["file_name"] ;
     $this->add_data_urut_upload("doc",$image_data["file_name"]);
     $arr = array('info' =>$image_data["file_name"],'status'=>"sukses","progress"=>"100%");
     echo  json_encode($arr);
      
                }


}
public function upload_file(){
          $config['upload_path']          = './uploads/original/';
                $config['allowed_types']        = 'gif|jpg|png|jpeg||zip|rar|';
                $config['max_size']             = 500000000000;
                $this->load->library('upload', $config);
                if ( ! $this->upload->do_upload())
                {
     $error = array('error' => $this->upload->display_errors());
                    if (is_array($error)) {
      foreach ($error as $item) {
      $arr = array('info' => $this->upload->display_errors(),'status'=>"error");
      json_encode($arr);
      return  $arr;
      }
     }     
                }
                else
                {
     $image_data =$this->upload->data();
     $this->tool_model->resizes_thumb($image_data);
     $this->tool_model->resizes($image_data);
                     //echo $image_data["file_name"] ;
     $this->add_data_urut_upload("image",$image_data["file_name"]);
     $arr = array('info' =>$image_data["file_name"],'status'=>"sukses","progress"=>"100%");
     echo  json_encode($arr);
      
                }
    

}

  
}

and the last is model

}
public function resizes_thumb($upload_data) { 
 $this->load->library('image_lib');
    $config_res['source_image'] = 'uploads/original/'.$this->upload->file_name;
    $config_res['maintain_ratio'] = TRUE;
    $config_res['width'] = 60;
    $config_res['height'] = 60;
 $config_res['create_thumb'] = true;
 $config_res['thumb_marker'] = "_thumb";
 $config_res['new_image'] = "uploads/thumb/";

    $this->image_lib->initialize($config_res);

    $this->image_lib->resize();

    $this->image_lib->clear();
 
}
public function resizes($upload_data) { 
 $this->load->library('image_lib');
    $config_res['source_image'] = 'uploads/original/'.$this->upload->file_name;
    $config_res['maintain_ratio'] = TRUE;

    $config_res['height'] = 250;
 $config_res['create_thumb'] = true;
 $config_res['thumb_marker'] = "_thumb";
 $config_res['new_image'] = "uploads/post/";

    $this->image_lib->initialize($config_res);

    $this->image_lib->resize();

    $this->image_lib->clear();
}

Learn To Code: Codeigniter

Search

Upload multiple file with codeigniter and ajax serta menggunkan drag file tutorial

Archive

Populer

Learn To Code: Codeigniter

Search

Upload multiple file with codeigniter and ajax serta menggunkan drag file tutorial

Archive

Populer

All About JSON

Cara mengirim data ke sistem database menggunakan php login form

playing audio javascript

Demystifying AJAX: Choosing the Best Method for Data Fetching in JavaScript

Upload multiple file with codeigniter and ajax serta menggunkan drag file tutorial