<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ---------->
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="http://www.expertphp.in/js/jquery.form.js"></script>
<script>
function preview_images()
{
var total_file=document.getElementById("images").files.length;
for(var i=0;i<total_file;i++)
{
$('#image_preview').append("<div class='col-md-3'><img class='img-responsive' src='"+URL.createObjectURL(event.target.files[i])+"'></div>");
}
}
</script>
</head>
<body>
<div class="container">
<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" class="btn-9">Tabs Percobaan</a></a></li>
<li><a href="#Tabs-Kedua" data-toggle="tab" class="btn-9"><i class="fa fa-camera" aria-hidden="true"></i> Media Picture</a></li>
<li><a href="#Tabs-Ketiga" data-toggle="tab" class="btn-9"><i class="fa fa-headphones" aria-hidden="true"></i> Media Audio</a></li>
<li class="active"><a href="#Tabs-Keempat" data-toggle="tab" class="btn-9"><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 class="row">
<form action="multiupload.php" method="post" enctype="multipart/form-data">
<div class="col-md-6">
<input type="file" class="form-control" id="images" name="images[]" onchange="preview_images();" multiple/>
</div>
<div class="col-md-6">
<input type="submit" class="btn btn-primary" name='submit_image' value="Upload Multiple Image"/>
</div>
</form>
</div><br><br>
<div class="row" id="image_preview"></div><br><br>
</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>
</html>
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: #807000;
background-color: #fff;
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;
}
[class^="btn-"] {
position: relative;
display: block;
margin: 20px auto;
width: 100%;
height: 80px;
max-width: 250px;
text-transform: uppercase;
overflow: hidden;
border: 1px solid currentColor;
}
a {
text-decoration: none;
line-height: 80px;
color: black;
}
.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; }
#formdiv {
text-align: center;
}
#file {
color: green;
padding: 5px;
border: 1px dashed #123456;
background-color: #f9ffe5;
}
#img {
width: 17px;
border: none;
height: 17px;
margin-left: -20px;
margin-bottom: 191px;
}
.upload {
width: 100%;
height: 30px;
}
.previewBox {
text-align: center;
position: relative;
width: 150px;
height: 150px;
margin-right: 10px;
margin-bottom: 20px;
float: left;
}
.previewBox img {
height: 150px;
width: 150px;
padding: 5px;
border: 1px solid rgb(232, 222, 189);
}
.delete {
color: red;
font-weight: bold;
position: absolute;
top: 0;
cursor: pointer;
width: 20px;
height: 20px;
border-radius: 50%;
background: #ccc;
}
.btn-6 {
color: #925fcd;
}
.btn-6 span {
position: absolute;
display: block;
width: 0;
height: 0;
border-radius: 50%;
background: #4c2876;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: width 0.4s, height 0.4s;
transition: width 0.4s, height 0.4s;
z-index: -1;
}
.btn-9 {
color: #55a7cf;
}
.btn-9:before, .btn-9:after,
.btn-9 span:before,
.btn-9 span:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 0;
background: rgba(33, 91, 119, 0.25);
-webkit-transition: 0.4s;
transition: 0.4s;
}
.btn-9:after,
.btn-9 span:before {
top: auto;
bottom: 0;
}
.btn-9 span:before,
.btn-9 span:after {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.btn-9:hover {
color: #cde5f1;
}
.btn-9:hover:before, .btn-9:hover:after,
.btn-9:hover span:before,
.btn-9:hover span:after {
height: 80px;
}
.btn-9:active {
background: #3798c6;
}
$('#add_more').click(function() {
"use strict";
$(this).before($("<div/>", {
id: 'filediv'
}).fadeIn('slow').append(
$("<input/>", {
name: 'file[]',
type: 'file',
id: 'file',
multiple: 'multiple',
accept: 'image/*'
})
));
});
$('#upload').click(function(e) {
"use strict";
e.preventDefault();
if (window.filesToUpload.length === 0 || typeof window.filesToUpload === "undefined") {
alert("No files are selected.");
return false;
}
// Now, upload the files below...
// https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Handling_the_upload_process_for_a_file.2C_asynchronously
});
deletePreview = function (ele, i) {
"use strict";
try {
$(ele).parent().remove();
window.filesToUpload.splice(i, 1);
} catch (e) {
console.log(e.message);
}
}
$("#file").on('change', function() {
"use strict";
// create an empty array for the files to reside.
window.filesToUpload = [];
if (this.files.length >= 1) {
$("[id^=previewImg]").remove();
$.each(this.files, function(i, img) {
var reader = new FileReader(),
newElement = $("<div id='previewImg" + i + "' class='previewBox'><img /></div>"),
deleteBtn = $("<span class='delete' onClick='deletePreview(this, " + i + ")'>X</span>").prependTo(newElement),
preview = newElement.find("img");
reader.onloadend = function() {
preview.attr("src", reader.result);
preview.attr("alt", img.name);
};
try {
window.filesToUpload.push(document.getElementById("file").files[i]);
} catch (e) {
console.log(e.message);
}
if (img) {
reader.readAsDataURL(img);
} else {
preview.src = "";
}
newElement.appendTo("#filediv");
});
}
});
