Skip to content
This repository has been archived by the owner on Mar 11, 2018. It is now read-only.

minus7/jquery-upload-progress

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

It can be used with apache, nginx, lighttpd or cherokee using their respective upload-progress modules, read more here: http://drogomir.com/blog/2008/6/18/upload-progress-bar-with-mod_passenger-and-apache

Usage:

some html:
     <form id="upload" enctype="multipart/form-data" action="index.html" method="post">
        <input name="file" type="file"/>
        <input type="submit" value="Upload"/>
      </form>
		
      <div id="uploading">
        <div id="progress" class="bar">
          <div id="progressbar">&nbsp;</div>
          <div id="percents"></div>
        </div>
      </div>

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

and a bit of 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+'%'); $('#progressbar').css({width: upload.percents+'%'});},
    /* progress reports url */
    progressUrl: "/progress",
    /* how often will bar be updated */
    interval: 2000
  });
});

If you need to update the progress bar from a different domain or subdomain, liek if your upload server is different from your normal web server, you can try the JSON-P protocol, like this:
$(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+'%'); $('#progressbar').css({width: upload.percents+'%'});},
    /* 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'
  });
});

defaults:

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

About

Upload progress bar working with apache, nginx and lighttpd upload progress modules

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%