Здравствуйте, читаю эту статью
https://habr.com/ru/post/154587/. Скачать исходники не получается так как они уже давно битые. От куда что берется не понятно, автор решил не вдаваться в подробности. Сейчас остановилась на загрузки файла, здесь не понятно, что это
var pbar = $('tr.' + trnum + ' td.size div.pbar');
pbar.css('width', Math.round((event.loaded / event.total) * 100) + 'px');
и как это реализовать, чтобы файлы начали грузиться?
Дополнительная trnum тоже не понятна для чего нужна. Полностью код ниже.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="./jquery-1.9.1.js"></script>
<title>Draws Lines</title>
<style>
body {
font-family: sans-serif;
}
a {
color: #369;
}
.note {
width: 500px;
margin: 50px auto;
font-size: 1.1em;
color: #333;
text-align: justify;
}
#drop-area {
border: 2px dashed #ccc;
border-radius: 20px;
width: 480px;
margin: 50px auto;
padding: 20px;
}
#drop-area.highlight {
border-color: purple;
}
p {
margin-top: 0;
}
.my-form {
margin-bottom: 10px;
}
#gallery {
margin-top: 10px;
}
#gallery img {
width: 150px;
margin-bottom: 10px;
margin-right: 10px;
vertical-align: middle;
}
.button {
display: inline-block;
padding: 10px;
background: #ccc;
cursor: pointer;
border-radius: 5px;
border: 1px solid #ccc;
}
.button:hover {
background: #ddd;
}
#fileElem {
display: none;
}
</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>
<progress id="progress-bar" max=100 value=0></progress>
<div id="gallery" /></div>
</div>
<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();
addFiles(event.originalEvent.dataTransfer.files);
$(this).css('border-color', 'gray');
$(this).css('color', 'gray');
}
})
.on('dragenter', function(event) {
// Просто подсвечиваем дропбокс при наведении.
$(this).css('border-color', 'green');
$(this).css('color', 'green');
})
.on('dragleave', function(event) {
// Убираем подсветку.
$(this).css('border-color', 'gray');
$(this).css('color', 'gray');
});
$('input[type=file]').on('change', function(event) {
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 {
console.log("test");
// Считаем файл.
var fr = new FileReader();
fr.file = v;
fr.readAsDataURL(v);
// Создаем строку для таблицы и заполняем её данными.
var row = document.createElement('tr');
/*
* Здесь опущен фрагмент по созданию элементов и текстовых узлов, для строки таблицы со списком выбранных файлов.
*/
$('table tbody').append(row);
// Добавляем наш файл в массив.
flist.push({file: v, trnum: 'id' + index});
}
});
}
form.addEventListener('submit', function (e) {
e.preventDefault();
console.log(this.file.name);
uploadFile(this.file.name, trnum) // trnum ---- ?
});
function uploadFile(file, 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 div.pbar');
pbar.css('width', Math.round((event.loaded / event.total) * 100) + 'px');
}
}, false);
// Создаем прослушиватель события load, который по окончанию загрузки подсветит прогресс-бар зеленым.
upload.addEventListener('load', function(event) {
var pbar = $('tr.' + trnum + ' td.size div.pbar');
pbar.css('width', '100px');
pbar.css('background', 'green');
}, false);
// Создаем прослушиватель события error, который при ошибке подсветит прогресс-бар красным.
upload.addEventListener('error', function(event) {
var pbar = $('tr.' + trnum + ' td.size div.pbar');
pbar.css('width', '100px');
pbar.css('background', 'red');
}, 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>