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

Posted by bg teuku On Saturday, May 7, 2016 0 comments


require:

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();
}

Ditulis Oleh : bg teuku

Artikel Upload multiple file with codeigniter and ajax serta menggunkan drag file tutorial ini ditulis oleh Bg Teuku pada hari Saturday, May 7, 2016. Saya sangat welcome kepada pertanyaan ,Dengan pertanyaan saya akan merasa di hargai karena tulisan sederhana yang jauh dari kata sempurna ini ternyata di pelajari sunguh-sunguh oleh anda, maka dari itu ajukan pertanyaan saya akan sebisa mungkin menjawabnya.
Hargai saya dengan memberikan link sumber apabila anda ingin COPAS artikel ini

:: TERIMAKASIH ::

Labels: ,

0 comments:

Post a Comment