Physical (Multiple) File Upload Using PHP and Javascript
28-January 2006.
21,291
16 I'm currently developing sort of an file gallery using PHP. As I almost finish going through the net to find useful script and function that are suitable for this project I found out that beta need some help to upload multiple file using one form so I decide to give it a try.
PHP & Javascript (well this ain't AJAX) is an extremely powerful language with in most cases you would need to have both to create an effective system. So here it is, the first part of the tutorial that going to help you create upload form that would able to handle multiple file upload and teach you how use PHP function to store all of them at once.
As usual, I would go through the javascript first which we would call as add_more_upload(). Basically this function would add another input file field to the current form so user have the option to choose how many files they want to upload at a time.
<script language="javascript">
<!--
function add_more_upload() {
var new_total = Math.round(document.Uploader.TOTAL_FILE.value) + 1;
document.getElementById('attach_' + document.Uploader.TOTAL_FILE.value).innerHTML = "<input type='file' size='60' name='theFile[" + new_total + "]' /></p><p id='attach_" + new_total + "'>";
document.Uploader.TOTAL_FILE.value++;
}
-->
</script>
This require some understanding on how javascript write into HTML using document.getElementById(xx).innerHTML work. Let let so to the form.
<form action="upload.php" name="Uploader" method="post" ENCTYPE="multipart/form-data">
File to Upload: <p id='attach'><input type="file" size="60" name="theFile[0]" /></p>
<p id='attach_0'></p>
<input type="hidden" name="MAX_FILE_SIZE" value="500000" />
<input type="hidden" name="TOTAL_FILE" value="0" /><br />
<input type="submit" name="submit" value="Upload" />
<input type='button' value='Upload More' onClick="add_more_upload()" />
</form>
If you look closely, you would notice that input file name is an array type theFile[0]. This is to ensure that multiple file upload is supported when you submit the form. Upload More button as you might guess would execute the javascript add_more_upload().
Now, finally the end part. The PHP script has not been optimized with condition checking and error exception but in general it would works.
<?php
$working_folder = $_SERVER['DOCUMENT_ROOT']."/upload/";
if(IsSet($_POST["submit"])) :
$xx = 0;
while($_POST["TOTAL_FILE"] >= $xx) :
@$fileName[$xx] = $_FILES['theFile']['name'][$xx];
@$tmpName[$xx] = $_FILES['theFile']['tmp_name'][$xx];
@$fileSize[$xx] = $_FILES['theFile']['size'][$xx];
@$fileType[$xx] = $_FILES['theFile']['type'][$xx];
move_uploaded_file ($tmpName[$xx], $working_folder.$fileName[$xx]);
$xx++;
endwhile;
print "Upload successful";
endif;
?>
You can change $working_folder location depending on the need, just make sure that it linked to the physical file not virtual (using URL). other than that, the different is just that the file will be extracted as array as well by PHP.
Good luck trying this tutorial.
» rebetavoluiton@gmail.com:
on 29-January 2006 at 10:44 AM | Quote
for the javascript part...the upload more function..i can't make it work...i don't know why :(
crynobone:
on 29-January 2006 at 14:48 PM | Quote
Here some step when checking javascript error.
1. That the problem happen on all modern browser or just some. Test it out at least with IE, FireFox and Opera.
2. I normally use Javascript Console available to check at which line the error accured.
Happy coding...
» rebetavolution@gmail.com:
on 01-February 2006 at 21:27 PM | Quote
i've tried it in firefox, but still no luck :(
why me :(
crynobone:
on 05-February 2006 at 12:36 PM | Quote
I tried testing your test page here. I think the problem with your javacscript is that your trying to accept the variable in
add_upload()as this, which I think this is a reserved name by javascript. I clean the script so by now the wouldn't be any error anymore.» rebetavolution@gmail.com:
on 06-February 2006 at 08:39 AM | Quote
muhahaha...
still no luck bro...
forget it lah...
» jixx@kve.cz:
on 30-June 2006 at 21:01 PM | Quote
I didn't test your script, but while writing my own, same working one, I've came to problem: when you press the button for adding one more input, already chosen files (values) of the rest are reset and I didnt find a way to get them back :(
Is it the same in yours?
crynobone:
on 30-June 2006 at 21:48 PM | Quote
Nope, but I did experience the same problem sometime ago but that was then. The problem can be overcome using DOM or Asynchronous File Upload with PHP, Javascript & iFrame
» Raj:
on 28-March 2007 at 21:04 PM | Quote
Great Stuff this really helps me a lot but one question how to validate the type and size of image before uploading the file.How to give a javascript alert when the user try to upload the image type which is not valid.
crynobone:
on 29-March 2007 at 17:22 PM | Quote
Well, JavaScript dont have a function to read file and get it's attribute such as size or type so it is impossible for that. However you can use RegEx function to get the type based from file extension using function such as JavaScript RegEx: File Extension.
» amin2u:
on 07-May 2007 at 15:39 PM | Quote
can u elaborate more detail....If I want to validate the type of the file using php, how to accomplish this one
crynobone:
on 08-May 2007 at 09:54 AM | Quote
You can use
$fileType[$xx] = $_FILES['theFile']['type'][$xx];to validate each uploaded file. Now using this you need to refer to MIME Type and not extension.» jayCavendish:
on 28-May 2007 at 21:35 PM | Quote
So, there is no way to validate the size? I thought php could do it.
crynobone:
on 28-May 2007 at 22:08 PM | Quote
Like I said, JavaScript doesn't have file read access. If you use PHP that mean the uploading process has started.
» Ilídio Martins:
on 01-August 2007 at 21:58 PM | Quote
The function add_more_upload() was giving me a lot of trouble on I.E. (but worked fine in Firefox)
So I made some changes to work in both sides:
<!--
Html Code changes
-->
<form action="upload.php" name="Uploader" method="post" ENCTYPE="multipart/form-data">
File to Upload: <div id='attach'><input name="userfile[0]" type="file" id="theFile[0]" maxlength="255" style="width:470px" /></div><div id=attach_0>
<input type="hidden" name="MAX_FILE_SIZE" value="500000" />
<input type="hidden" name="TOTAL_FILE" value="0" /><br />
<input type="submit" name="submit" value="Upload" />
<input type='button' value='Upload More' onClick="add_more_upload()" />
</form>
<!--
JavaScript Code changes
-->
<SCRIPT languange="JAVASCRIPT">
<!--
function add_more_upload() {
var new_total = Math.round(document.Uploader.TOTAL_FILE.value) + 1;
document.getElementById('attach_' + document.Uploader.TOTAL_FILE.value).innerHTML = "<input type='file' size='60' id='theFile[" + new_total + "]' name='theFile[" + new_total + "]' /></div><div id='attach_" + new_total + "'>";
document.Uploader.TOTAL_FILE.value++;
}
-->
</SCRIPT>
» Ilídio Martins:
on 01-August 2007 at 22:05 PM | Quote
<!--
Html Code changes
Ups sorry, there was error on the name of the File Input .. It was theFile
-->
<form action="upload.php" name="Uploader" method="post" ENCTYPE="multipart/form-data">
File to Upload: <div id='attach'><input name="theFile[0]" type="file" id="theFile[0]" maxlength="255" style="width:470px" /></div><div id=attach_0>
<input type="hidden" name="MAX_FILE_SIZE" value="500000" />
<input type="hidden" name="TOTAL_FILE" value="0" /><br />
<input type="submit" name="submit" value="Upload" />
<input type='button' value='Upload More' onClick="add_more_upload()" />
</form>
» devaryan:
on 12-April 2008 at 09:04 AM | Quote
this is weird?
i try to upload to files, both files were upload successfully when i used it without table. but when i try this:
<table>
<form action="index_add_do.php" name="uploader" method="post" ENCTYPE="multipart/form-data">
<tr><td>
File to Upload: <p id='attach'><input type="file" size="60" name="theFile[0]" /></p>
<p id='attach_0'></p>
<input type="hidden" name="MAX_FILE_SIZE" value="500000" />
<input type="hidden" name="TOTAL_FILE" value="0" /><br />
<input type="submit" name="submit" value="Upload" />
<input type='button' value='Upload More' onClick="add_more_upload()" />
</td></tr>
</form>
</table>
then only the first file that were uploaded. i dont really understand javascript, so if you could help help will much appreciate. thanks