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 回答