Bootstrap Snippet #Tabs #upload #multiple using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 $('#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);
          }
        }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"#Tabs #upload #multiple"
Bootstrap 4.0.0 Snippet by edzapratama

Related: See More

Questions / Comments:

"#Tabs #upload #multiple" Bootstrap 4.0.0 Snippet by edzapratama

Related: See More

Questions / Comments:

"#Tabs #upload #multiple"
Bootstrap 4.0.0 Snippet by edzapratama