Meteor用CollectionsFS上传文件时进度条的显示

          在Meteo开发Web中上传文件用CollectionsFS很方便。上传文件与上传图片是一样的方法，怎样上传文件參參考：http://blog.csdn.net/casun_li/article/details/46356379，上传文件时显示运行进度条是很必要的。Meteor有提供进度条UI包：Meteor-cfs-ui，显示出来很easy,本文參考：https://github.com/CollectionFS/Meteor-cfs-ui

 

        详细使用非常easy：

   原文地址：http://blog.csdn.net/casun_li/article/details/46801585 

1.增加ui包,进入app主文件夹下：

     $  meteor add cfs:ui

2.html文件里

<input type="file" id="upload_file" ><--文件选择控件-->

{{#if IsUploading}}
    {{#with FS.GetFile "file_records" IsUploading}}
             
          {{> FS.UploadProgressBar bootstrap=true class='progress-bar-success progress-bar-striped' showPercent=true}}</p>
              
    {{/with}}
{{/if}}

FS.GetFile 是将With之间的Context设置成一个FS.file实例, file_records是保存数据库的集合的名称，IsUploading是js文件里的helpers，得到的是正在上传的
文件在file_record集合中的_id

3. js 文件里：上传文件时拿到file_id后设置：Session.set('file_id',fileObj._id);

Template.templatename.events({

    'change #upload_file': function(event, template) {上传文件
        FS.Utility.eachFile(event, function(file) {

            FileRecords.insert(file, function (err, fileObj) {
                if (err) {
                    console.log('上传文件失败:'+err);
                    return;
                }
                Session.set('file_id',fileObj._id);
            });

        });
    }

});

Template.templatename.helpers({
    IsUploading:function(){
        return Session.get("file_id");
    }
});

至此就能全然显示运行进度条了。OK。

原文地址：http://blog.csdn.net/casun_li/article/details/46801585 

转载于:https://www.cnblogs.com/jzdwajue/p/7122444.html