Поскольку мы не можем изменить выбранный массив файлов в теге , я обновил код, чтобы показать количество файлов и удалить все файлы, если выбрано несколько файлов.
$(function () {
var dropZoneId = "drop-zone";
var buttonId = "clickHere";
var mouseOverClass = "mouse-over";
var dropZone = $("#" + dropZoneId);
var ooleft = dropZone.offset().left;
var ooright = dropZone.outerWidth() + ooleft;
var ootop = dropZone.offset().top;
var oobottom = dropZone.outerHeight() + ootop;
var inputFile = dropZone.find("input");
document.getElementById(dropZoneId).addEventListener("dragover", function (e) {
e.preventDefault();
e.stopPropagation();
dropZone.addClass(mouseOverClass);
var x = e.pageX;
var y = e.pageY;
if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
inputFile.offset({
top: y - 15,
left: x - 100
});
} else {
inputFile.offset({
top: -400,
left: -400
});
}
}, true);
if (buttonId != "") {
var clickZone = $("#" + buttonId);
var oleft = clickZone.offset().left;
var oright = clickZone.outerWidth() + oleft;
var otop = clickZone.offset().top;
var obottom = clickZone.outerHeight() + otop;
$("#" + buttonId).mousemove(function (e) {
var x = e.pageX;
var y = e.pageY;
if (!(x < oleft || x > oright || y < otop || y > obottom)) {
inputFile.offset({
top: y - 15,
left: x - 160
});
} else {
inputFile.offset({
top: -400,
left: -400
});
}
});
}
document.getElementById(dropZoneId).addEventListener("drop", function (e) {
$("#" + dropZoneId).removeClass(mouseOverClass);
}, true);
inputFile.on('change', function (e) {
$('#filename').html("");
var fileNum = this.files.length,
initial = 0,
counter = 0,
fileNames = "";
for (initial; initial < fileNum; initial++) {
counter = counter + 1;
fileNames += this.files[initial].name + ' ';
}
if(fileNum > 1)
fileNames = 'Files selected...';
else
fileNames = this.files[0].name + ' ';
$('#filename').append(''+ fileNum + '' + fileNames + '
');
// add remove event
$('#filename').find('.closeBtn').click(function(){
$('#filename').empty();
inputFile.val('');
});
///End change
});
})