在Meteo开发Web中上传文件用CollectionsFS非常方便,上传文件与上传图片是一样的方法,如何上传文件参参考:http://blog.csdn.net/casun_li/article/details/46356379,上传文件时显示进度条是非常必要的,Meteor有提供进度条UI包:Meteor-cfs-ui,显示出来非常简单,本文参考:https://github.com/CollectionFS/Meteor-cfs-ui
具体使用很简单:
原文地址: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