.png)
demo
description:here is singgle page where load from view folder of codeigniter
Drag and select multi file and showing progres when upload with ajax and 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(); }
