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 ，它更能说明我的意思（对不起我的英语）

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

2 个答案: