Upload Multiple Files

August 11th, 2008

Recently, I have been working on a project that involved uploading multiple files to the server with PHP. There are several ways to go about doing this: 1) Upload each image one at a time (but that really isn’t a multi uploading way) or 2) Place all the images in an array. Option 1 is pretty much ruled out because you aren’t uploading multiple images at once; And Option 2 is the way to go because that is the purpose of this tutorial, but there is a small problem that you might not be aware: over exceeding the posted max file size that is set in your php.ini file. Assuming you don’t have your own server, and depending on your host, you might be able to ask them to bump this up to a more reasonable amount other than the default 2MB. But usually you are limited because you most likely have a shared web host and they don’t want you to upload too large of a file to disturb the other users on that server, or they don’t want you to take too much space. Which is understandable.

So my solution was to upload each image at a time without leaving the page. How is this possible? With iFrames. I did a simple add and remove row with Javascript, allowing the user to select how many and what files to upload. Once the user selected all the desired files, I use Javascript again to check if all the files had the correct extension (.png in this case), then submit each form at a time after the other one got completed. I am not going to bother to explain the code the this time around, because I believe the explanation is well enough the code to understand.

Here is the sample
(of course the files aren’t being uploaded… just the page refreshes letting you know if it worked correctly or not).

And here are the files used to do the magic: zip

Javascript > PHP

Leave a Reply

Enter code snippets inside of <pre> and </pre>