Create Drag & Drop Multiple Files Enabled Input Field using jQuery
Create Drag & Drop Multiple Files Enabled Input Field using jQuery
In Default input file field you need to manually you need to choose file images which you need to manually upload. but this jquery script convert your default input file field into Drag & Drop Multiple Files Enabled Input Field which enhance user experience and and your website user can easily drag and drop files which they need to upload.
Libraries
Include the jquery library on page.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" /> |
HTML
<div class="wrapper"> <div class="drop"> <div class="cont"> <i class="fa fa-cloud-upload"></i> <div class="tit"> Drag & Drop </div> <div class="desc"> your files to Assets, or </div> <div class="browse"> click here to browse </div> </div> <output id="list"></output><input id="files" multiple="true" name="files[]" type="file" /> </div> </div> |
CSS
Styling multiple file select input box with drag and drop.
@import bourbon @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700) @import 'bourbon' *, *:before, *:after @include box-sizing(border-box) body, html font-family: 'Montserrat', sans-serif font-size: 100% font-weight: 400 background: white color: #323a44 width: 100% height: 100% margin: 0 padding: 0 -webkit-font-smoothing: antialiased -moz-osx-font-smoothing: grayscale input:focus, select:focus, textarea:focus, button:focus outline: none =center margin: auto position: absolute top: 0 left: 0 bottom: 0 right: 0 .wrapper width: 100% height: 100% .drop width: 96% height: 96% border: 3px dashed #DADFE3 border-radius: 15px overflow: hidden text-align: center background: white @include transition(all .5s ease-out) +center .cont width: 500px height: 170px color: #8E99A5 @include transition(all .5s ease-out) +center i font-size: 400% color: #8E99A5 position: relative .tit font-size: 400% text-transform: uppercase .desc color: #A4AEBB line .browse margin: 10px 25% color: white padding: 8px 16px border-radius: 5px background: #09f input width: 100% height: 100% cursor: pointer background: red opacity: 0 +center #list width: 100% text-align: left position: absolute left: 0 top: 0 .thumb height: 75px border: 1px solid #323a44 margin: 10px 5px 0 0 |
JS
Finally addthe below jquery code to make your drag and drop multiple image selection actionable.
var drop = $("input"); drop.on('dragenter', function (e) { $(".drop").css({ "border": "4px dashed #09f", "background": "rgba(0, 153, 255, .05)" }); $(".cont").css({ "color": "#09f" }); }).on('dragleave dragend mouseout drop', function (e) { $(".drop").css({ "border": "3px dashed #DADFE3", "background": "transparent" }); $(".cont").css({ "color": "#8E99A5" }); }); function handleFileSelect(evt) { var files = evt.target.files; for (var i = 0, f; f = files[i]; i++) { if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); reader.onload = (function(theFile) { return function(e) { var span = document.createElement('span'); span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join(''); document.getElementById('list').insertBefore(span, null); }; })(f); reader.readAsDataURL(f); } } $('#files').change(handleFileSelect); |
See live demo and download source code.
DEMO
| DOWNLOAD
This awesome script developed by aPinix, Visit their official codepen repository for more information and follow for future updates.