0

アップロードの割合を測定し、結果をプレーンテキストとして、プログレスバーまたは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) + ' %'));

    }
});

上記は私が現在使用しているものの一部であり、IDが「upload_progress」のdivに丸められたパーセンテージ+％を出力します。html5プログレスタグを使用しているプログレスバーにもパーセンテージを出力したいと思います。<progress id="progressbar" value="X" max="100"></progress>Xがjavascriptからのものであるこのようなもの。

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

必要に応じてこれを追加すると役立つと思いましたが、まったく機能していないようです。

これが明らかな場合は申し訳ありませんが、私はJavaScriptとプログラミング全般に不慣れです。どうすればこれを機能させることができますか？

ありがとう

4

1 に答える 1

0

まず、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(...);
してください。それ以外は、コードに問題はありません。

于 2013-02-23T12:06:52.087 に答える