帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:Lighttpd  Nginx  模块  进度条  Light  modules  Apache  上传  
Upload progress bar working with apache, nginx and lighttpd upload progress modules

  • 源代码名称:jquery-upload-progress
  • 源代码网址:http://www.github.com/drogus/jquery-upload-progress
  • jquery-upload-progress源代码文档
  • jquery-upload-progress源代码下载
  • Git URL:
    git://www.github.com/drogus/jquery-upload-progress.git
  • Git Clone代码到本地:
    git clone http://www.github.com/drogus/jquery-upload-progress
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/drogus/jquery-upload-progress
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • 它可以与apache上传进度模块,Nginx 上传进度模块或者lighttpd一起使用,在这里阅读更多: http://drogomir.com/blog/2008/6/18/upload-progress-bar-with-mod_passenger-and-apache

    用法

    一些 html:

    
     <div id="uploading">
    
    
     <div id="progress" class="bar">
    
    
     <div id="progressbar">&nbsp;</div>
    
    
     <div id="percents"></div>
    
    
     </div>
    
    
     </div>
    
    
    
    

    然后是一些 css:

    
    .bar {
    
    
     width: 300px;
    
    
    }
    
    
    
    #progress {
    
    
     background: #eee;
    
    
     border: 1px solid #222;
    
    
     margin-top: 20px;
    
    
    }
    
    
    #progressbar {
    
    
     width: 0px;
    
    
     height: 24px;
    
    
     background: #333;
    
    
    }
    
    
    
    

    还有一点 javascript:

    
    $(function() {
    
    
     $('form').uploadProgress({
    
    
    /* scripts locations for safari */
    
    
     jqueryPath:"../lib/jquery.js",
    
    
     uploadProgressPath:"../jquery.uploadProgress.js",
    
    
    /* function called each time bar is updated */
    
    
     uploading: function(upload) {$('#percents').html(upload.percents+'%');},
    
    
    /* selector or element that will be updated */
    
    
     progressBar:"#progressbar",
    
    
    /* progress reports url */
    
    
     progressUrl:"/progress",
    
    
    /* how often will bar be updated */
    
    
     interval: 2000
    
    
     });
    
    
    });
    
    
    
    

    如果需要从不同的域或者子站点更新进度条,则liek如果上传服务器与常规web服务器不同,可以尝试:

    
    $(function() {
    
    
     $('form').uploadProgress({
    
    
    /* scripts locations for safari */
    
    
     jqueryPath:"../lib/jquery.js",
    
    
     uploadProgressPath:"../jquery.uploadProgress.js",
    
    
    /* function called each time bar is updated */
    
    
     uploading: function(upload) {$('#percents').html(upload.percents+'%');},
    
    
    /* selector or element that will be updated */
    
    
     progressBar:"#progressbar",
    
    
    /* progress reports url in a different domain or subdomain from caller */
    
    
     progressUrl:"uploads.somewhere.com/progress",
    
    
    /* how often will bar be updated */
    
    
     interval: 2000,
    
    
    /* use json-p for cross-domain call */
    
    
     dataType: 'jsonp'
    
    
     });
    
    
    });
    
    
    
    

    默认值:

    
    interval: 2000
    
    
    progressBar:"#progressbar"
    
    
    progressUrl:"/progress"
    
    
    start: function() {}
    
    
    uploading: function() {}
    
    
    complete: function() {}
    
    
    success: function() {}
    
    
    error: function() {}
    
    
    uploadProgressPath: '/javascripts/jquery.js'
    
    
    jqueryPath: '/javascripts/jquery.uploadProgress.js'
    
    
    dataType: 'json'
    
    
    
    

    许可证

    Rails 上的ruby 是在 MIT许可证发布的。



    文章标签:Light  模块  Apache  上传  进度  modules  Nginx  进度条  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语