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.
HTML
Drag & Drop
your files to Assets, or
click here to browse
CSS
Styling multiple file select input box with drag and drop.
@import bourbon
// IMPORT
// ---------------------------------------------------------------------
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700)
@import 'bourbon'
// BASE
// ---------------------------------------------------------------------
*,
*: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
/*&:hover
cursor: pointer
background: #f5f5f5*/
.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
//color: #D2D9DF
//border-bottom: 1px solid
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; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['
'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
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.
