"uploadcsv"
Bootstrap 3.1.0 Snippet by hiteshdhanwani

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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> <body> <div class="container"> <div class="page-header"> <h1 style="color: #800000">File Uploader </h1> </div> <div> <h2 style="color: #800000">Upload CSV File</h2> <form action="" method="post" enctype="multipart/form-data" id="js-upload-form"> <div class="form-inline"> <span class="btn btn-success fileinput-button"> <i class="glyphicon glyphicon-plus"></i> <span>Add files</span> <input type="file" name="files[]" multiple style="color: black"> </span> <button type="button" class="btn btn-primary start" data-ng-click="submit()"> <i class="glyphicon glyphicon-upload"></i> <span>Start upload</span> </button> <button type="reset" class="btn btn-warning cancel"> <i class="glyphicon glyphicon-ban-circle"></i> <span>Cancel upload</span> </button> <button type="button" class="btn btn-danger delete"> <i class="glyphicon glyphicon-trash"></i> <span>Delete</span> </button> <br> <br> <button type="button" class="btn btn-success dropdown-toggle"> <i class="glyphicon glyphicon-circle-arrow-right"></i> <span>Converted</span> </buttton> </div> </form> </body> </html>
<style> .redborder { border:2px solid #f96145; border-radius:2px; } .hidden { display: none; } .visible { display: normal; } .colored { background-color: #F0EEEE; } .row { padding: 20px 0px; } .bigicon { font-size: 97px; color: #f96145; } .contcustom { text-align: center; width: 300px; border-radius: 0.5rem; top: 0; bottom: 0; left: 0; right: 0; margin: 10px auto; background-color: white; padding: 20px; } input { width: 100%; margin-bottom: 17px; padding: 15px; background-color: #ECF4F4; border-radius: 2px; border: none; } h2 { margin-bottom: 20px; font-weight: bold; color: #ABABAB; } .btn { border-radius: 2px; padding: 10px; } .med { font-size: 27px; color: white; } .medhidden { font-size: 27px; color: #f96145; padding: 10px; width:100%; } .wide { background-color: #8EB7E4; width: 100%; -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } @media (min-width: 768px) { .omb_row-sm-offset-3 div:first-child[class*="col-"] { margin-left: 25%; } } .omb_login .omb_authTitle { text-align: center; line-height: 300%; } .omb_login .omb_socialButtons a { color: white; // In yourUse @body-bg opacity:0.9; } .omb_login .omb_socialButtons a:hover { color: white; opacity:1; } .omb_login .omb_socialButtons .omb_btn-facebook {background: #3b5998;} .omb_login .omb_socialButtons .omb_btn-twitter {background: #00aced;} .omb_login .omb_socialButtons .omb_btn-google {background: #c32f10;} .omb_login .omb_loginOr { position: relative; font-size: 1.5em; color: #aaa; margin-top: 1em; margin-bottom: 1em; padding-top: 0.5em; padding-bottom: 0.5em; } .omb_login .omb_loginOr .omb_hrOr { background-color: #cdcdcd; height: 1px; margin-top: 0px !important; margin-bottom: 0px !important; } .omb_login .omb_loginOr .omb_spanOr { display: block; position: absolute; left: 50%; top: -0.6em; margin-left: -1.5em; background-color: white; width: 3em; text-align: center; } .omb_login .omb_loginForm .input-group.i { width: 2em; } .omb_login .omb_loginForm .help-block { color: red; } @media (min-width: 768px) { .omb_login .omb_forgotPwd { text-align: right; margin-top:10px; } </style>
<script type="text/javascript"> $("#input-4").fileinput({showCaption: false}); function check_values() { if ($("#username").val().length != 0 && $("#password").val().length != 0) { $("#button1").removeClass("hidden").animate({ left: '250px' });; $("#lock1").addClass("hidden").animate({ left: '250px' });; } } </script>

Related: See More

Material Bootstrap Wizard

Questions / Comments: