Нет я могу конечно прокомментировать длину моей шаманской логической цепочки. ))
К примеру
xhr.open("POST", "", true);
была убрана, не просто так, а по наводке. Но это не важно.
Поскольку пример приведенный выше, был первым способом, до изменения регистров и удалением строк. И он так и не работает.
Что бы было понятно:
<!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>
<div id="showany"></div>
<script>
function log(html) {
document.getElementById('log').innerHTML = html;
}
document.forms.upload.onsubmit = function() {
var file = this.elements.myfile.files[0];
document.getElementById('showany').innerHTML = file.name
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.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
log(evt.loaded + ' / ' + evt.total)
}
}, false);*/
// обработчик для закачки
xhr.upload.onloadend = function () {
document.getElementById('showany').innerHTML = "Загружено"
}
xhr.upload.onprogress = function(event) {
log(event.loaded + ' / ' + event.total);
}
var formData = new FormData() //new FormData(document.forms.upload);
formData.append("myfile", file);
xhr.open("POST", "", true);
xhr.send(formData);
/*Вариант загрузки/прогресс бара
$(document).on('change', '#shot-upload-data', function(e){
var xhr = new XMLHttpRequest(),
data = new FormData($('#shot-upload-form')[0]);
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var progress = Math.round(evt.loaded * 100 / evt.total);
$('#noTrespassingOuterBarG').css({width:progress + '%'}) #это прогрессбар у меня такой
}
}, false);
xhr.open("POST", "/some/path/");
xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
xhr.send(data);
});
*/
}
</script>
</body>
</html>
А вообще, спасибо большое за информацию. Я только взялся за JS, синтаксис по java интуитивно понимаю, но по объектам я почти ноль.
