Responsive Bootstrap Multi File Uploader jQuery Plugin – uploadHBR.js
Responsive Bootstrap Multi File Uploader jQuery Plugin – uploadHBR.js:-
uploadHBR is a pretty cool bootstrap based responsive file uploader with drag and drop file selector feature. Helpful for adding multi file upload feature on website. The plugin mainly support almost all features you required during file upload like multiple file selection, drag&drop support, mobile support, and preview images etc.
Integrate Responsive Bootstrap Multi File Uploader
Libraries
Include bootstrap library for uploader design and then load plugins library on page.
<!--CSS-->
<link id="bootstrap-styleshhet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="../dist/css/style.min.css" rel="stylesheet" type="text/css"/>
<!--JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script src="../dist/js/modernizr.min.js"></script>
<script src="../dist/js/uploadHBR.min.js"></script>
HTML
Create multiple file upload box to upload multiple files.
<div class="row">
<div class="col-md-12">
<div class="col-md-12 text-center">
<form role="form" action="upload.php" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="col-md-12 col-lg-12 col-xs-12" id="columns">
<h3 class="form-label">Select the images</h3>
<div class="desc"><p class="text-center">or drag to box</p></div>
<div id="uploads"><!-- Upload Content --></div>
</div>
<div class="clearfix"></div>
<button class="btn btn-danger btn-lg pull-left" id="reset" type="button" ><i class="fa fa-history"></i> Clear</button>
<button class="btn btn-primary btn-lg pull-right" type="submit" ><i class="fa fa-upload"></i> Upload </button>
</div>
</div>
</form>
</div>
</div>
</div>
JS
Now Initialzie the plugin and pass the options to customize the uploader.
<script>
$(document).ready(function () {
uploadHBR.init({
"target": "#uploads",
"max": 18,
"textNew": "ADD",
"textTitle": "Click here or drag to upload an imagem",
"textTitleRemove": "Click here remove the imagem"
});
$('#reset').click(function () {
uploadHBR.reset('#uploads');
});
});
</script>
See live demo and download source code.
DEMO | DOWNLOAD
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.
