Skip to content
Upload progress bar working with apache, nginx and lighttpd upload progress modules
JavaScript
Latest commit 2028b40 Mar 26, 2014 @drogus Merge pull request #11 from stulentsev/patch-1
Fix code indentation in README
Failed to load latest commit information.
example options.jqueryPath and options.uploadProgressPath to set scripts loac… Jun 30, 2008
lib Initial commit Jun 27, 2008
.project Initial commit Jun 27, 2008
README.md Update README.md Mar 26, 2014
jquery.uploadProgress.js

README.md

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

Usage

some html:

  <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+'%');},
    /* selector or element that will be updated */
    progressBar: "#progressbar",
    /* 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+'%');},
    /* 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'
  });
});

defaults:

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'

License

Ruby on Rails is released under the MIT License.

Something went wrong with that request. Please try again.