Javascript-форум - Не работает XMLHttpRequest.upload.onprogress при POST запосах

Нет я могу конечно прокомментировать длину моей шаманской логической цепочки. ))

К примеру

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 интуитивно понимаю, но по объектам я почти ноль.