04.10.2016, 16:33
|
Новичок на форуме
|
|
Регистрация: 04.10.2016
Сообщений: 7
|
|
Не работает XMLHttpRequest.upload.onprogress при POST запосах
Привет всем! Хочу прикрутить "прогресс бар" на загрузку файлов, но он не работает при POST запросах. Подскажите почему такое может быть?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method='POST' name="upload" enctype="multipart/form-data">
<input type="file" name="myfile">
<input type="submit" value="Загрузить">
</form>
<div id="log">Прогресс загрузки</div><br>
<script>
function log(html) {
document.getElementById('log').innerHTML = html;
}
document.forms.upload.onsubmit = function() {
var file = this.elements.myfile.files[0];
if (file) {
upload(file);
}
return false;
}
function upload(file) {
var xhr = new XMLHttpRequest();
// обработчики можно объединить в один,
// если status == 200, то это успех, иначе ошибка
xhr.onload = xhr.onerror = function() {
if (this.status == 200) {
log("success");
} else {
log("error " + this.status);
}
};
// обработчик для закачки
xhr.upload.onloadend = function () {
document.getElementById('showany').innerHTML = "Загружено"
}
xhr.upload.onprogress = function(event) {
log(event.loaded + ' / ' + event.total);
}
var formData = new FormData(Document.forms.upload);
xhr.send(formData);
}
</script>
</body>
</html>
|
|
04.10.2016, 16:46
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Serduko, Document
|
|
05.10.2016, 08:52
|
Новичок на форуме
|
|
Регистрация: 04.10.2016
Сообщений: 7
|
|
Пробовал и так. Почему тогда GET запросы показывает? Файлы закачиваются, кстати, без проблем.
|
|
05.10.2016, 09:35
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Serduko, не понял что ты пробовал, но пробовал ты что-то явно судя по картинке, и при чем здесь GET, но я имел ввиду что Document пишется с маленькой буквы, смотри строку 54 и исправь ее и больше ничего не пробуй... и файлы естественно закачиваются естественным образом с перезагрузкой так как скрипт выкидывает ошибку на этой строке до предотвращения естественного образа...
Последний раз редактировалось Rise, 05.10.2016 в 09:39.
|
|
05.10.2016, 10:13
|
Новичок на форуме
|
|
Регистрация: 04.10.2016
Сообщений: 7
|
|
Ага, понял, спасибо. Исправил, но в целом не помогло. По прежнему, видимо, перегружается вся страница.
|
|
05.10.2016, 10:46
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Сообщение от Serduko
|
но в целом не помогло.
|
Так... а где xhr.open... просто скопипасть как есть и всё заработает...
|
|
05.10.2016, 10:57
|
Новичок на форуме
|
|
Регистрация: 04.10.2016
Сообщений: 7
|
|
Убирал за "ненадобностью", с ним все также было. Спасибо.
Попробовал вот так, сработало:
var formData = new FormData();
formData.append("myfile", file);
xhr.open("POST", "", true);
xhr.send(formData);
Интересно почему так:
new FormData(document.forms.upload);
не хотел?
|
|
05.10.2016, 11:06
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Serduko, потому что правишь код бездумно методом тыка
|
|
05.10.2016, 11:32
|
Новичок на форуме
|
|
Регистрация: 04.10.2016
Сообщений: 7
|
|
Нет, не так, охватываю больший объем, чем следует, иногда игнорируя детальное рассмотрение частей, тем самым делая ошибки. Хотя можно и проще сказать, начал "шаманить".
Вопрос был по классу объекта и принимаемым экземплярам в конструкторе. Ладно, сам разберусь, и на том спасибо.
Последний раз редактировалось Serduko, 05.10.2016 в 11:36.
|
|
05.10.2016, 12:44
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Сообщение от Serduko
|
сам разберусь
|
поменяй регистр у буквы или строку удали рандомно... пошамань)))
ладно смотри как очевидные вещи делаются вам шаманам не понять
var formData = new FormData(document.forms.upload);
xhr.open("POST", "", true);
xhr.send(formData);
|
|
|
|