Использование результата запроса javascript в качестве значения в ‹progress›

Я пытаюсь измерить процент загрузки и вывести результат в виде обычного текста и в виде значения для индикатора выполнения или ширины div.

    var request = new XMLHttpRequest();
request.upload.addEventListener('progress', function (event) {
    if (event.lengthComputable) {
        var percent = event.loaded / event.total;
        var progress = document.getElementById('upload_progress');

        while (progress.hasChildNodes()) {
            progress.removeChild(progress.firstChild);
        }
        progress.appendChild(document.createTextNode(Math.round(percent * 100) + ' %'));

    }
});

Выше приведена часть того, что я сейчас использую, и он выводит округленный процент +% в div с идентификатором «upload_progress». Я хотел бы также вывести процент на индикатор выполнения, который использует тег прогресса html5. Что-то вроде этого <progress id="progressbar" value="X" max="100"></progress>, где X из javascript.

var bar = document.getElementById('progressbar')
bar.value = (Math.round(percent * 100))

Я подумал, что добавление этого, где это уместно, поможет, но, похоже, оно вообще не работает.

Извините, если это должно быть очевидно, я новичок в javascript и программировании в целом. Как я могу заставить это работать?

Спасибо


javascript xmlhttprequest progress-bar getelementbyid
person Community    schedule 23.02.2013    source источник
comment
var bar = документ.…?   -  person Bergi    schedule 23.02.2013
comment
вау, да, спасибо, оказывается, это было просто и несколько опечаток, я чувствую себя таким глупым. я думаю, это то, что я получаю за попытку кодировать в 4 утра   -  person    schedule 23.02.2013
comment
Когда я просто набираю <progress max="100" value="25"> и даже использую JS, кажется, что это работает   -  person Explosion Pills    schedule 23.02.2013

Ответы (1)


arrow_upward
0
arrow_downward

Во-первых, убедитесь, что вы получаете элементы после полной загрузки DOM. Кроме того, вы должны установить процент выполнения value внутри обработчика событий progress.

var progress, bar;
window.onload = function() {
    progress = document.getElementById('upload_progress');
    bar = document.getElementById('progressbar');
}

var request = new XMLHttpRequest();
request.upload.addEventListener('progress', function (event) {
    if (event.lengthComputable) {
        var percent = Math.round(event.loaded / event.total * 100);
        bar.value = percent;
        // other code here...
    }
});

Почему вы так много манипулируете DOM? Вы должны просто установить innerHTML соответствующего div, чтобы показать текст в процентах.

// instead of this:
//while (progress.hasChildNodes()) {
//    progress.removeChild(progress.firstChild);
//}
//progress.appendChild(document.createTextNode(percent + ' %'));

// You can do this:
progress.innerHTML = percent + ' %';

И, наконец, убедитесь, что вы звоните request.open(...);
Кроме того, я не вижу никаких проблем с вашим кодом.

person Onur Yıldırım    schedule 23.02.2013