For use with the Nginx upload progress module or the Apache upload progress module.
http://wiki.codemongers.com/NginxHttpUploadProgressModule http://github.com/drogus/apache-upload-progress-moduleExample:
<style type="text/css">
#progress {
width: 300px;
background: #eee;
border: 1px solid #222;
}
#progressbar {
width: 0px;
height: 24px;
background: #333;
}
</style>
<script type="text/javascript">
document.observe('dom:loaded', function() {
$('upload').uploadProgress();
});
</script>
<form action="/some_action" enctype="multipart/form-data" id="upload" method="post">
<input id="myFile" name="myFile" type="file" />
<input type="submit" value="Upload!" />
</form>
<div id="progress" style="display: none;">
<div id="progressbar"> </div>
</div>
You can pass some options to the uploadProgess() call.
$('upload').uploadProgress({interval: 5});
Port by Edgar J. Suárez – http://mimbles.net
Modified by Nick Plante – http://blog.zerosum.org
Based on the jQuery plugin: http://blog.new-bamboo.co.uk/assets/2007/11/23/jquery.nginxUploadProgress.js