Multiple File Upload in PHP using IFRAME

By: Tom @ nono . be  

Handling multiple uploads can be a lot more user friendly with a little help of javascript and form posting to iFrame... To make it all a little bit more edible, you can use AJAX and divs to provide loader gifs etc...

Work with separate forms; note the target of each form = csr. It is the ID of an iFrame somewhere on the page. I call it CSR as short for Client-Server-Request.

Also note the hidden input formId that we will use in the php upload handler.

disable submitting the form using onsubmit="return false"...

Finally a button outside the form structure starting a javascript function onclick="upload(document.form_0, document.loader_0)"

<form onsubmit="return false" id="file_0" name="file_0" action="upload.php" target="csr" enctype="multipart/form-data" method="post" style="margin:px; padding:0px">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>File 1:</td>
<td>
<input type="hidden" id="formId" name="formId" value="0" />
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="1000000" />
<input type="file" id="userFile" name="userFile" class="invulveld100pct" />
</td>
<td>
<div id="loader_0"></div>
</td>
</tr>
</table>
</form>
<form onsubmit="return false" id="file_1" name="file_1" action="upload.php" target="csr" enctype="multipart/form-data" method="post" style="margin:px; padding:0px">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>File 2:</td>
<td>
<input type="hidden" id="formId" name="formId" value="1" />
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="1000000" />
<input type="file" id="userFile" name="userFile" class="invulveld100pct" />
</td>
<td>
<div id="loader_0"></div>
</td>
</tr>
</table>
</form>
<input type="button" onclick="upload(document.form_0, document.loader_0)" />
<iframe id="csr" name="csr" height="1" width="1" style="border:0px none"></iframe>
<!--//The javascript://-->
<script type="javascript">
function upload(form, loader){
//only do this if the form exists
if(form){
//display a loadbar
loader.innerHTML = 'loading.gif';
form.submit();
}
}
</script>

The php upload handler upload.php
Remember, your page will not refresh because the post is sent to your CSR iFrame.

<?php
//there are enough examples around to handle the upload...
//the only important difference is the error reporting and the starting of the next form upload...
//presume $uploadOk is a boolean that is true if the upload succeeds; false if it fails...
//note the use of "parent" in the outputted javascript... the script is outputted into the CSR iFrame... therefor it needs parent to acces dom objects and javascript of the main page.
$currentFormId = $_POST['formId'];
$nextFormId = $_POST['formId'] + 1;

echo "<script type=\"javascript\">";

//change the content of your loader div to a desired image
if($uploadOk){
echo "parent.loader_{$currentFormId}.innerHTML = 'uploadOk.gif';";
} else {
echo "parent.loader_{$currentFormId}.innerHTML = 'uploadNotOk.gif';";
}

//submit the next form... the javascript function will only perform it if the form exists.
echo "parent.upload(document.form_{$nextFormId}, document.loader_{$nextFormId});";

echo "</script>";

?>

This is just a quick draft of how to handle multiple files this way and I'm sure you would need to optimize the workflow to fit your needs, but the benefit of working this way is although your user still chooses multiple files, they are in fact posted one by one... This means your MAX_FILE_SIZE is determined for each file separately as opposed to the combined size of all files in one post.




Archived Comments

1. Georgeowept
View Tutorial          By: Georgeowept at 2017-05-03 08:20:13

2. EddieJeope
View Tutorial          By: EddieJeope at 2017-05-02 16:44:59

3. Daniellot
View Tutorial          By: Daniellot at 2017-04-30 04:32:52

4. Managing several submissions can be a lot more simple to use with a little help of javascript and ty
View Tutorial          By: Curran Cline at 2012-12-18 05:43:44

5. Handling several submissions can be a lot simple to use with a little help of javascript and type pu
View Tutorial          By: Blaze Blankenship at 2012-12-05 13:04:12


Most Viewed Articles (in PHP )

The new keyword and constructors in PHP

Convert a hex string into a 32-bit IEEE 754 float number in PHP

Using Sessions in PHP

Exception in module wampmanager.exe at 000F15A0 in Windows 8

Installing PHP with nginx-server under windows

PHP 5.1.4 INSTALLATION on Solaris 9 (Sparc)

Building PHP 5.x with Apache2 on SuSE Professional 9.1/9.2

Installing PHP 5.x with Apache 2.x on HP UX 11i and configuring PHP 5.x with Oracle 9i

Cannot load /usr/local/apache/libexec/libphp4.so into server: ld.so.1:......

Setting up PHP in Windows 2003 Server IIS7, and WinXP 64

error: "Service Unavailable" after installing PHP to a Windows XP x64 Pro

Function to force strict boolean values in PHP

Function to convert strings to strict booleans in PHP

Function to sort array by elements and count of element in PHP

Malware: global $ob_starting;

Latest Articles (in PHP)

Comment on this tutorial