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

原创 2015年07月08日 11:54:30

          在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 


Java web 中实现 文件上传 进度条显示

请客官参考http://blog.itpub.net/30066956/viewspace-1775286/ 这一篇文章,来决定使用哪儿种,个人觉得使用uploadify更好更方便。感谢:http:/...
  • chengwangbaiko
  • chengwangbaiko
  • 2017年05月11日 14:43
  • 2213

基于uploadify.js实现多文件上传和上传进度条的显示

uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制、文件类型、是否自动上传等属性,可以显示上传的进度条。官网地址是http://www.uploadify....
  • shan1774965666
  • shan1774965666
  • 2014年12月10日 09:02
  • 2587

Bootstrap file-input 插件使用(大文件上传显示进度条)

Bootstrap file-input 是一个文件上传的插件 ,使用之后会使文件上传变得特别简单. 方法:1.添加css和js支持 除了插件需要的js和css,还需jquery和bootst...
  • MrJavaweb
  • MrJavaweb
  • 2017年06月23日 13:29
  • 3413

上传文件时显示进度条的代码

//下载时检测网络环境并显示下载进度 if(/android/i/.test(navigator.userAgent)) {//判断为android }else if(/ipad | iphone...
  • qq_36341800
  • qq_36341800
  • 2017年01月19日 19:48
  • 178

asp.net2.0+ajax开发的文件上传并显示进度条

  • 2008年12月02日 13:10
  • 16KB
  • 下载

springmvc上传文件实时显示进度条

  • 2017年11月28日 16:47
  • 610KB
  • 下载

文件上传(进度条显示)源码20130410

  • 2013年05月14日 13:27
  • 322KB
  • 下载

NeatUpload大文件上传(进度条显示)..

  • 2010年02月25日 13:33
  • 3.04MB
  • 下载

文件上传显示进度条(asp.net)

  • 2008年02月18日 15:01
  • 18KB
  • 下载

javascript+HTML5 多文件上传(插件)多进度条显示

  • 2015年02月06日 09:38
  • 2KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Meteor用CollectionsFS上传文件时进度条的显示
举报原因:
原因补充:

(最多只允许输入30个字)