require:
demo
VIDEO
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 : 200 px ; border : 5 px 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 : 208 px ;
height : 208 px ;
float : left ;
background : # eee ;
padding : 5 px 5 px 5 px 5 px ;
margin : 3 px ;
}
. img-upload > img {
display : block ;
display : block ;
margin : auto auto ;
}
. box-opload{
float : left ;
width : 208 px ;
float : left ;
margin : 3 px ;
}
. progress{
position : relative ;
top : - 7 px ;
width : 200 px ;
height : 5 px ;
margin-left : 8 px ;
}
. progress > . progress-bar{
height : 4 px ;
position : relative !important ;
bottom : 0 px ;
}
#holder. hover { border : 10 px dashed # 0c0 !important ; }
. boxfile{
align-items : center ;
display : flex;
justify-content : center ;
top : 50 px ;
position : relative ;
height : 40 px ;
width : 300 px ;
}
. drag{
font-size : 30 px ;
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( ) ;
}