4

ファイルのアップロードの進行状況バーを作成する必要があります。私の進行状況イベントリスナーが機能していることはわかっています。これを行うための「角度のある方法」はありますか？イベントリスナー内からプログレスバーを更新するにはどうすればよいですか?

序文として、助けが必要な場合は、一般的なロジック フローを自由に修正および批評してください。

私はこのキャンバスを持っています...

<canvas id="progress"></canvas>

ファイルをアップロードする angularjs ディレクティブがあります。プログレスイベントリスナーを追加しました（関連する部分のみを表示します）...

link: function postLink(scope, element, attrs, ctrl) {
    var fileUpload = function (img, file) {
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(e) {
            if (e.lengthComputable) {
                var percentage = Math.round((e.loaded * 100) / e.total);
                // UPDATE THE PROGRESS BAR HERE
            }
        }, false);
    }
    element.bind('change', function (evt) {
         var files = evt.target.files;
         var canvas = document.getElementById("progress"),
         context = canvas.getContext("2d");
         context.fillStyle = 'lighgray';
         context.fillRect(0, 0, 200, 18);
         context.moveTo(0, 0);
         context.fillStyle = 'darkgray';
         context.fillRect(0, 0, 1, 18);
         for(var i = 0; i < files.length; i++) {
             fileUpload(files, files[i]);
        }
    }
}
4

2 に答える 2

6

Angular UI Bootstrap をご覧ください: http://angular-ui.github.io/bootstrap/

進行状況バーを含む Bootstrap UI 要素のディレクティブを提供します。

アップロードの進行状況の値をバーにバインドするだけで、自動的に更新されるようです。

(双方向のデータバインディングが大好きです。)

于 2013-07-25T02:39:30.353 に答える
0

HTML5 プログレス タグを見てください。コードは次のようになります。

    if (e.lengthComputable) {
        var percentage = Math.round((e.loaded * 100) / e.total);
        $('progress').val(percentage);
    }

互換性に多くの問題があり、ブラウザによって見た目が異なることは知っています（ただし、css3を使用して修正できます：いい例です）

あなたの場合、長方形を何度も塗りつぶす必要があります

if (e.lengthComputable) {
    var percentage = e.loaded / e.total;
    context.fillRect(0, 0, progressWidth*percentage, 18);
}

コンテキストを作成するときに*100%使用した方がよいため、削除しますvar progressWidth = 200

この例を見てください、それは私の言いたいことをよりよく示しています（そして私の英語で申し訳ありません）

于 2013-07-25T03:11:57.853 に答える