Решила я использовать тег progress. После этого заработала загрузка с прогресс баром. Только я столкнулось с проблемой dragdrop. Чтобы картинку добавить в браузер для загрузки, нужно перетащить файл в эту область. Как показано на скриншоте.
Но при попытки это сделать окно закрывается, а вместо него открывается картинка.
Drag-Drop срабатывает только в том случае если прицельно попасть в input “Выбрать файл”. Как исправить чтобы файл добавлялся при попадание на всей области, а не только в input? Вот мой переделанный код.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="./jquery-1.9.1.js"></script>
<title>Upload Multiple Files</title>
<style>
body {
font-family: sans-serif;
}
#drop-area {
border: 2px dashed #ccc;
border-radius: 20px;
width: 480px;
margin: 50px auto;
padding: 20px;
}
.my-form {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="maxfcerr"></div>
<div id="maxtserr"></div>
<div id="drop-area">
<form id="form_upload" class="my-form">
<input type="file" name="file" size="1" multiple />
<input type="submit" value="Отправить"/>
</form>
</div>
</form>
<table>
<tbody>
</tbody>
</table>
<script>
// ************************ Drag and drop ***************** //
let dropArea = document.getElementById("drop-area")
var maxfs = 150;
var maxfc = 5;
var maxts = 1200;
var flist = new Array();
var maxfsFiles = [];
var curts = 1000;
var index = 0;
const form = document.querySelector('#form_upload');
$('#drop-area')
.on('drop', function(event) {
index++;
if (event.originalEvent.dataTransfer.files.length) {
// Если были заброшены файлы передадим массив функции addFiles.
event.preventDefault();
event.stopPropagation();
console.log(event.originalEvent.dataTransfer.files);
addFiles(event.originalEvent.dataTransfer.files);
$(this).css('border-color', 'gray');
$(this).css('color', 'gray');
}
})
.on('dragenter', function(event) {
console.log("test2");
event.preventDefault();
event.stopPropagation();
// Просто подсвечиваем дропбокс при наведении.
$(this).css('border-color', 'green');
$(this).css('color', 'green');
})
.on('dragleave', function(event) {
event.preventDefault();
event.stopPropagation();
// Убираем подсветку.
$(this).css('border-color', 'gray');
$(this).css('color', 'gray');
});
$('input[type=file]').on('change', function(event) {
console.log(event.originalEvent);
addFiles(this.files);
});
function addFiles(files) {
index++;
$.each(files, function(i, v) {
// Проверим на различные превышения лимитов.
if (v.size/1024 > maxfs) {
maxfsFiles.push(v.name);
} else if (flist.length >= maxfc) {
$('div#maxfcerr').show('fast');
return false;
} else if (maxts - curts < v.size/1024) {
$('div#maxtserr').show('fast');
return false;
} else {
// Считаем файл.
var fr = new FileReader();
fr.file = v;
fr.readAsDataURL(v);
// Создаем строку для таблицы и заполняем её данными.
var row = document.createElement('tr');
row.className = "id"+index;
var td = document.createElement('td');
td.className = "size"
var div = document.createElement('progress');
div.setAttribute("max", 100);
div.setAttribute("value", 0);
<!--<progress id="progress-bar" max=100 value=0></progress>-->
row.appendChild(td);
td.appendChild(div);
div.className = "pbar";
/*
* Здесь опущен фрагмент по созданию элементов и текстовых узлов, для строки таблицы со списком выбранных файлов.
*/
$('table tbody').append(row);
// Добавляем наш файл в массив.
flist.push({file: v, trnum: 'id' + index});
}
});
}
form.addEventListener('submit', function (e) {
e.preventDefault();
for (const {file, trnum} of flist)
uploadFile(file, trnum) // trnum ---- ?
});
function uploadFile(file, trnum) {
console.log(trnum);
if (file) {
var xhr = new XMLHttpRequest();
upload = xhr.upload;
// Создаем прослушиватель события progress, который будет "двигать" прогресс-бар.
upload.addEventListener('progress', function(event) {
if (event.lengthComputable) {
var pbar = $('tr.' + trnum + ' td.size progress.pbar');
pbar[0].value = Math.round((event.loaded / event.total) * 100);
//console.log(pbar[0]);
//pbar.css('width', Math.round((event.loaded / event.total) * 100) + 'px');
}
}, false);
// Создаем прослушиватель события load, который по окончанию загрузки подсветит прогресс-бар зеленым.
upload.addEventListener('load', function(event) {
var pbar = $('tr.' + trnum + ' td.size progress.pbar');
pbar[0].value = '100';
}, false);
// Создаем прослушиватель события error, который при ошибке подсветит прогресс-бар красным.
upload.addEventListener('error', function(event) {
}, false);
// Откроем соединение.
xhr.open('POST', 'handler.php');
// Устанавливаем заголовки.
xhr.setRequestHeader('Cache-Control', 'no-cache');
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.setRequestHeader("X-File-Name", file.name);
// Отправляем файл.
xhr.send(file);
}
}
</script>
</body>
</html>