HTML_Progress2 : The Definitive Guide

You have to identify what server script will manage the temporary file uploaded when operation is over, with form action attribute. Here in our example it's the same script (apc5_upload1.php) that design the progress bar and form.

You have to tell what action will start upload and progress bar (HTML_Progress2.start). Here in our example it's the form onsubmit handler what begin to iterate the polling loop each 0.5 second (500 ms).

The html code is similar to a classic upload, however, add a field hidden inside form where name attribute depend of backend used (APC or uploadprogress PHP extension).

This field is used to store a key that will recognize the form to observe on server-side.

The asynchronous mode is achieved through the use of a hidden iframe which is connected to form through the ownership target of the tag form that takes value for the property name of the iframe.

Here is a form design part example (you can find on examples/ajax/upload/apc5_upload1.php) of the package distribution.

    
<form enctype="multipart/form-data"
      target="tfrm" action="apc5_upload1.php" method="post"
      onsubmit="HTML_Progress2.start('<?php echo $pb->getIdent(); ?>', 500);">
  <input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $progress_key; ?>" />
  <input type="file" id="userfile"  name="userfile" />
  <input type="submit" value="Upload!" />
</form>
<iframe id="tfrm" name="tfrm" style="width:1px;height:1px;border:0"></iframe>