Responsive Bootstrap Multi File Uploader jQuery Plugin – uploadHBR.js

on

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.
Responsive Bootstrap Multi File Uploader jQuery Plugin


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>
download source code.








Comments

Post a Comment