<div class="fileupload-buttonbar">
<div class="fileupload-buttons">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="fileinput-button">
<span>Add files...</span>
<input type="file" name="files[]" id="uploaderfiles" multiple>
</span>
<span class="fileupload-process"></span>
</div>
<div class="fileupload-progress fade" style="display:none">
<!-- The global progress bar -->
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-extended">&nbsp;</div>
</div>
</div>

<div class="dropzones" id="dropzone">
<br><br>Drag and drop files here, or click to choose files
<input type="file" name="files[]" id="uploaderfiles" multiple style="display: none;">
</div>
<div class="fileupload-buttonbar">
<div class="fileupload-progress fade" style="display:none">
<!-- The global progress bar -->
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-extended">&nbsp;</div>
</div>
</div>

$("#dropzone").on("click",function(){// here when click on dropzone div
$("#dropzone input[type='file']").trigger('click');// then trigger input type=file change event
});
$("#dropzone input[type='file']").on("click",function(e){ e.stopPropagation(); });

$(document).bind('dragover', function (e) {
var dropZone = $('#dropzone'),
timeout = window.dropZoneTimeout;
if (!timeout) {
dropZone.addClass('in');
} else {
clearTimeout(timeout);
}
var found = false,
node = e.target;
do {
if (node === dropZone[0]) {
found = true;
break;
}
node = node.parentNode;
} while (node != null);
if (found) {
dropZone.addClass('hover');
} else {
dropZone.removeClass('hover');
}
window.dropZoneTimeout = setTimeout(function () {
window.dropZoneTimeout = null;
dropZone.removeClass('in hover');
}, 100);
});

.dropzones
{
background: #FFFFFF;
background-position: center;
width: 100%;
height: 190px;
text-align: center;
font-weight: bold;
font-size: 150%;
border: 3px dashed #AACCFF;
cursor: pointer;
}

#dropzone.in
{
width: 100%;
height: 190px;
line-height: 200px;
font-size: larger;
}
#dropzone.hover
{
background: #EEEEEE;
background-position: center;
}
#dropzone.fade
{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
opacity: 1;
}