使用FileReader跟踪加载的多个文件

Question

我正在尝试使用Meteor项目中的FileReader跟踪多次下载。

我想要做的是让用户选择带有file输入的多个文件，然后让他跟踪表格中所有这些文件的加载情况。

以下是home.js中的相关代码：

Template.home.created = function () {
    CSVFiles = new Mongo.Collection(null);
};

Template.home.helpers = function () {
    'files' : function () {
        return CSVFiles.find();
    },
};


Template.home.rendered = function () {
    var global_id = 1;

    $(':file').change( function() {
        var files = this.files;
        for (var i = 0; i < files.length; i++) {
            var id = global_id++;
            CSVFiles.insert({
                'id' : id
                , 'name' : files[i].name
                , 'progress' : 0
            });

            var reader = new FileReader();
            reader.readAsText(files[i]);

            reader.onprogress = function (data) {
                if (data.lengthComputable) {
                CSVFiles.update({'id': id}, {$set: {
                        'progress': parseInt(((data.loaded / data.total) * 100), 10)
                    }});
                }
            }

            reader.onload = function () {
                CSVFiles.update(
                    { 'id': id },
                    { $set: {'progress': 100} }
                );
            }
        }
    });
};

home.html：

<input name='file' type="file" multiple />

<table>
    <tbody>
        {{#each files}}
        <tr>
            <td>{{id}}</td>
            <td>{{name}}</td>
            <td>{{progress}}%</td>
        </tr>
        {{/each}}
    </tbody>
</table>

}

我的问题是只有最后一行更新＆＃34; Progress＆＃34;，而其他人只是保持在0.我也很好奇你对这段代码的效率有什么看法，因为在加载文件的时候，我几乎无法选择其他文件（我的电脑冻结）。