add example with a progress bar

There are technically 2 ways to implement a progress bar for file uploads:

Older method: Depends on webserver configuration and used serverside scripting language. Webserver provides information of progress, e.g. browser sends extra ajax/http requests periodically asking the progress of an upload. Requires some kind of session preparation and handling. Could maybe even work without javascript. (iframe refresh timeout ..)

Newer easier client based method: The webbrowser itself provides the progress information of an ongoing upload. No extra http requests are required. So it is actually not the job of class.upload.php, but find it interesting to share.

At the test/index.html in the XMLHttpRequest upload example add:

<div id="progressbar1" class="progressbar"></div>
<style>
.progressbar{
  // just very basic, you can make it much more fancy   
  background-color:#f00;
  height:20px;
  width:0px;
 }
</style>

I changed the 'xhr_send()' in test/index.html to this as first try and seems to work in the 3 browsers I tried (firefox,safari,chrome):

  function xhr_send(f, e) {
        if (f) {
          xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
              document.getElementById(e).innerHTML = xhr.responseText;
            }
          }
          xhr.open("POST", "upload.php?action=xhr");

          // here starts the progressbar stuff
      xhr.upload.addEventListener("progress", function (event) {
            console.log(event, event.lengthComputable, event.total);
            if (event.lengthComputable) {
              self.progress = event.loaded / event.total;
            } else if (this.explicitTotal) {
              self.progress = Math.min(1, event.loaded / self.explicitTotal);
            } else {
              self.progress = 0;
            }
            // shows percent with 1 decimal for example
            document.getElementById('progressbar1').innerHTML=Math.floor(self.progress*1000)/10 + '%';
           // just simple css changes, you can make it much more fancy
           document.getElementById('progressbar1').style.width=self.progress*300 + 'px';

          }, false);
          // end of progressbar stuff

          xhr.setRequestHeader("Cache-Control", "no-cache");
          xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
          xhr.setRequestHeader("X-File-Name", f.name);
          xhr.send(f);
        }
      }

verot / class.upload.php

add example with a progress bar #105