如何通过文件上传将进度条集成到 angularjs 指令中

Question

我需要为文件上传创建一个进度条。我知道我的进度事件监听器正在工作。是否有更多“角度方式”可以做到这一点？如何从事件侦听器中更新进度条？

作为序言，如果一般逻辑流程也需要帮助，请随时纠正和批评。

我有这个画布...

<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]);
        }
    }
}

Answer 1

看看 Angular UI Bootstrap：http://angular-ui.github.io/bootstrap/

它为包括进度条在内的 Bootstrap UI 元素提供指令。

看起来你只需要将上传进度值与栏绑定，它会自动更新。

（一定喜欢双向数据绑定。）

Answer 2

看看HTML5 progress tag，你的代码会是这样的

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

我知道它有很多兼容性问题，并且在不同的浏览器中看起来不同（尽管您可以使用 css3 修复它：nice example）

在你的情况下，你应该一次又一次地填充矩形

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

我去掉了*100%，因为你最好在创建上下文时使用var progressWidth = 200

看this example，它更好地表达了我的意思（对不起我的英语）