<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
HTML side
</title>
<link rel="stylesheet" href="book.css" type="text/css" />
<meta name="generator" content="DocBook XSL Stylesheets V1.69.1" />
<link rel="start" href="index.html" title="HTML_Progress2 Manual" />
<link rel="up" href="ch11.html" title=
"Chapter 11. How to to implement an AJAX Upload with Progress Bar solution " />
<link rel="prev" href="ch11.html" title=
"Chapter 11. How to to implement an AJAX Upload with Progress Bar solution " />
<link rel="next" href="ch11s03.html" title="Server side" />
<style type="text/css">
/*<![CDATA[*/
body {
background-color: white;
color: black;
}
:link { color: #0000FF }
:visited { color: #840084 }
:active { color: #0000FF }
div.c2 {margin-left: 0.5in; margin-right: 0.5in;}
h2.c1 {clear: both}
/*]]>*/
</style>
</head>
<body>
<table class="progress2Header">
<tr>
<td>
<img src="img/pear_progress2.gif" align="left" alt=
"PEAR Progress2 logo" />
<h1>
HTML_Progress2 : The Definitive Guide
</h1>
<div class="navheader">
<table width="100%" summary="Navigation header">
<tr>
<th colspan="3" align="center">
HTML side
</th>
</tr>
<tr>
<td width="20%" align="left">
<a accesskey="p" href="ch11.html">Prev</a>
</td>
<th width="60%" align="center">
Chapter 11. How to to implement an AJAX Upload
with Progress Bar solution
</th>
<td width="20%" align="right">
<a accesskey="n" href="ch11s03.html">Next</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<div class="sect1" lang="en" xml:lang="en">
<div class="titlepage">
<h2 class="title c1">
<a name="upload.html_side" id="upload.html_side"></a>HTML side
</h2>
</div>
<p>
You have to identify what server script will manage the temporary file
uploaded when operation is over, with <span class="emphasis"><em>form
action</em></span> attribute. Here in our example it's the same script
(<code class="filename">apc5_upload1.php</code>) that design the
progress bar and form.
</p>
<p>
You have to tell what action will start upload and progress bar
(HTML_Progress2.start). Here in our example it's the <span class=
"emphasis"><em>form onsubmit</em></span> handler what begin to iterate
the polling loop each 0.5 second (500 ms).
</p>
<p>
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).
</p>
<div class="important c2">
<table border="0" summary="Important">
<tr>
<td rowspan="2" align="center" valign="top" width="48">
<img alt="[Important]" src="img/admons/important.png" />
</td>
<th align="left">
Important
</th>
</tr>
<tr>
<td align="left" valign="top">
<p>
With APC, the hidden input indentifier should be named
APC_UPLOAD_PROGRESS, and UPLOAD_IDENTIFIER with the
uploadprogress PHP extension.
</p>
</td>
</tr>
</table>
</div>
<p>
This field is used to store a key that will recognize the form to
observe on server-side.
</p>
<div class="note c2">
<table border="0" summary="Note">
<tr>
<td rowspan="2" align="center" valign="top" width="48">
<img alt="[Note]" src="img/admons/note.png" />
</td>
<th align="left">
Note
</th>
</tr>
<tr>
<td align="left" valign="top">
<p>
Several input file can be placed in the same form, in this case
the progression is based on the total weight of all files.
</p>
</td>
</tr>
</table>
</div>
<p>
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.
</p>
<p>
Here is a form design part example (you can find on <code class=
"filename">examples/ajax/upload/apc5_upload1.php</code>) of the package
distribution.
</p>
<pre class="html4strict">
<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>
</pre>
</div>
<table class="progress2Footer">
<tr>
<td align="left">
HTML_Progress2 : The Definitive Guide
</td>
<td align="right">
v 2.4.0 : April 20, 2007
</td>
</tr>
</table>
<div class="navfooter">
<hr />
<table width="100%" summary="Navigation footer">
<tr>
<td width="40%" align="left">
<a accesskey="p" href="ch11.html">Prev</a>
</td>
<td width="20%" align="center">
<a accesskey="u" href="ch11.html">Up</a>
</td>
<td width="40%" align="right">
<a accesskey="n" href="ch11s03.html">Next</a>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">
Chapter 11. How to to implement an AJAX Upload with
Progress Bar solution
</td>
<td width="20%" align="center">
<a accesskey="h" href="index.html">Home</a>
</td>
<td width="40%" align="right" valign="top">
Server side
</td>
</tr>
</table>
</div>
</body>
</html>
distrib
>
Mandriva
>
2010.0
>
i586
>
media
>
contrib-release
>
by-pkgid
>
89346381d9fb64d9ee8827de5f073355
>
files
>
39
