Форум

Katy93 · #1 (**permalink**) 22.03.2022, 10:07

Здравствуйте, читаю эту статью 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>

ksa · #2 (**permalink**) 22.03.2022, 11:27

Сообщение от Katy93

Сейчас остановилась на загрузки файла, здесь не понятно, что это

var pbar = $('tr.' + trnum + ' td.size div.pbar');
pbar.css('width', Math.round((event.loaded / event.total) * 100) + 'px');

Это отрисовка прогресса загрузки...

Сообщение от Katy93

Дополнительная trnum тоже не понятна для чего нужна.

Там хранится имя класса элемента отвечающего за показ прогресса.

voraa · #3 (**permalink**) 22.03.2022, 11:36

Строки 164- 168 должны быть такими

form.addEventListener('submit', function (e) {
  e.preventDefault();
  for (const {file, trnum} of flist)
     uploadFile(file, trnum)  // trnum ---- ?
});

А сам класс строкам назначается в

/*
             * Здесь опущен фрагмент по созданию элементов и текстовых узлов, для строки таблицы со списком выбранных файлов.
             */

Katy93 · #4 (**permalink**) 22.03.2022, 14:00

Файлы стали загружаться на сервер, а вот прогресс бар по прежнему не работает в функции uploadFile. Код я не много изменила, чтобы селекторам было куда ссылаться. В addFiles я добавила следующие строки.

// Создаем строку для таблицы и заполняем её данными.
var row = document.createElement('tr');
row.className = ".id"+index;
var td = document.createElement('td');
td.className = ".size"
var div = document.createElement('div');
			
row.appendChild(td);
td.appendChild(div);
div.className = ".pbar";

ksa · #5 (**permalink**) 22.03.2022, 14:18

Сообщение от Katy93

div.className = ".pbar";

Так указывать класс не стоит.

div.className = "pbar";

или

div.classList.add("pbar");

Katy93 · #6 (**permalink**) 22.03.2022, 17:54

Поменяла, также решетки в id убрала они тоже не нужны. Однако все равно не работает progress bar. Вот эти строки:

if (event.lengthComputable) {
179
                var pbar = $('tr.' + trnum + ' td.size div.pbar');
180
                pbar.css('width', Math.round((event.loaded / event.total) * 100) + 'px');
181
            }

Так же загрузка файла происходит со второй попытки, то есть когда нажимаешь кнопку "submit" второй раз.

Katy93 · #7 (**permalink**) 22.03.2022, 18:03

Одну ошибку удалось исправить случайно записала вот так.

form.addEventListener('submit', function (e) {
  e.preventDefault();
  
  form.addEventListener('submit', function (e) {
  e.preventDefault();
  for (const {file, trnum} of flist)
     uploadFile(file, trnum)  // trnum ---- ?
});

  
  //console.log(this.file.name);
  //uploadFile(this.file.name, trnum)  // trnum ---- ?
});

Исправила.

Теперь осталось исправить проблнму с progress bar. Почему он не появляется?

voraa · #8 (**permalink**) 22.03.2022, 19:54

А сама таблица то есть? В которую tr и td добавляются?
Если есть, то только в отладчике смотреть, что куда добавляется, где они находятся и какие у них стили.

Katy93 · #9 (**permalink**) 22.03.2022, 20:20

Решила я использовать тег 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>

Форум

Справочник

Discord чат

Курсы javascript