<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://rawgithub.com/hayageek/jquery-upload-file/master/css/uploadfile.css" rel="stylesheet">
<script src="https://rawgithub.com/hayageek/jquery-upload-file/master/js/jquery.uploadfile.min.js"></script>
<div class="container">
<div class="page-header">
<h1>Upload | <small>Media </small></h1>
</div>
<div class="col-md-12">
<div class="panel with-nav-tabs panel-primary">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#Tabs-Kesatu" data-toggle="tab">ALL</a></li>
<li><a href="#Tabs-Kedua" data-toggle="tab"><i class="fa fa-camera" aria-hidden="true"></i> Media Picture</a></li>
<li><a href="#Tabs-Ketiga" data-toggle="tab"><i class="fa fa-headphones" aria-hidden="true"></i> Media Audio</a></li>
<li class="active"><a href="#Tabs-Keempat" data-toggle="tab"><i class="fa fa-file-text" aria-hidden="true"></i> Media File</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade" id="Tabs-Kesatu">
<div>
Tabs Percobaan
</div>
</div>
<div class="tab-pane fade" id="Tabs-Kedua">
<div id="mulitplefileuploader">Upload</div>
<div id="status"></div>
<div id="startbutton" class="ajax-file-upload-green">Start Upload</div>
<div class="col-md-12">
<button type="button" class="btn btn-labeled btn-success pull-right">
<span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>Save
</button>
</div>
</div>
<div class="tab-pane fade" id="Tabs-Ketiga">
<div class="col-md-12">
<!-- untuk backend actionnya ditunjukan ke mana -->
<form method="POST" action="#">
<div class="form-group files">
<label>Upload Your File </label>
<input type="file" class="form-control" multiple="">
</div>
<div class="col-md-12">
<button type="button" class="btn btn-labeled btn-success pull-right">
<span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>Save
</button>
</div>
</form>
</div>
</div>
<div class="tab-pane fade in active" id="Tabs-Keempat">
<!-- disini maksudnya in active yaitu mengaktifkan file yg ditampilkan untuk pertamakali -->
<div class="col-md-12">
<form method="POST" action="#">
<div class="form-group files color">
<label>Upload Your File </label>
<input type="file" class="form-control" multiple="">
</div>
<div class="col-md-12">
<button type="button" class="btn btn-labeled btn-success pull-right">
<span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>Save
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
body{margin-top:20px;}
.with-nav-tabs.panel-primary .nav-tabs > li > a,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
color: #fff;
}
.with-nav-tabs.panel-primary .nav-tabs > .open > a,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
color: #fff;
background-color: #3071a9;
border-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
color: #428bca;
background-color: #fff;
border-color: #428bca;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
background-color: #428bca;
border-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #fff;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
background-color: #4a9fe9;
}
.files input {
outline: 2px dashed #92b0b3;
outline-offset: -10px;
-webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
transition: outline-offset .15s ease-in-out, background-color .15s linear;
padding: 120px 0px 85px 35%;
text-align: center !important;
margin: 0;
width: 100% !important;
}
.files input:focus{ outline: 2px dashed #92b0b3; outline-offset: -10px;
-webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
transition: outline-offset .15s ease-in-out, background-color .15s linear; border:1px solid #92b0b3;
}
.files{ position:relative}
.files:after { pointer-events: none;
position: absolute;
top: 60px;
left: 0;
width: 50px;
right: 0;
height: 56px;
content: "";
background-image: url(https://image.flaticon.com/icons/png/128/109/109612.png);
display: block;
margin: 0 auto;
background-size: 100%;
background-repeat: no-repeat;
}
.color input{ background-color:#f1f1f1;}
.files:before {
position: absolute;
bottom: 10px;
left: 0; pointer-events: none;
width: 100%;
right: 0;
height: 57px;
content: " or drag it here. ";
display: block;
margin: 0 auto;
color: #2ea591;
font-weight: 600;
text-transform: capitalize;
text-align: center;
}
.btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;}
.btn-labeled {padding-top: 0;padding-bottom: 0;}
.btn { margin-bottom:10px; }
$(document).ready(function()
{ var settings = {
url: "upload.php",
method: "POST",
allowedTypes:"jpg,png,gif,doc,pdf,zip",
fileName: "myfile",
multiple: true,
dragdropWidth:1080,
onSuccess:function(files,data,xhr)
{
$("#status").html("<font color='green'>Upload is success</font>");
},
onError: function(files,status,errMsg)
{
$("#status").html("<font color='red'>Upload is Failed</font>");
}
}
$("#mulitplefileuploader").uploadFile(settings);
});
$("#startbutton").click(function()
{
extraObj.startUpload();
});
