Multi file upload with PHP/Javascript and no flash

Question

I'm trying to make a webpage that allows the uploading of multiple files at the same times. I will limit the file extensions to the most common images like JPG, JPEG, PNG and GIF.

I've done some research on this and everywhere I look it's flash this and flash that.

I don't want to use flash really. Especially with Flash 10, which disables the most common used method to enable multifile upload.

What I'm looking for is a way to keep creating more and more input fields, each with a browse button and then with one final upload button at the bottom of the form. Creating the new input fields with a Javascript is nog big deal really.

So I'm wondering how this works. Do I need to give all file-input fields the same name atribute so I can use 1 piece of PHP code to solve this? Or Is there some way for PHP to detect howmany files have been sumbitted and simply put the code for parsing a file inside a for-loop?

Answer 1

You can keep adding 'file' inputs but use a name of something like 'upload[]'

<input type="file" name="upload[]">

Then in $_FILES['upload'] you will have an array of files you can loop over like

foreach ($_FILES['upload'] as $file) {
    echo $file['size'];
}

Answer 2

Here is the algorithm:

You add the new file input fields to your form. Each of this field MUST have a unique name. Then, on the server side, you loop through the $_FILES array looking how many files have been uploaded and handling them.

Answer 3

In using JavaScript to add new upload fields, you could also have JavaScript update some "hidden" input field with the number of upload fields in the form. That way, once you click Submit, that hidden value should be submitted and it will be trivial to parse out the $_FILES array for all the uploaded files.

Answer 4

If you have a reasonable maximum limit on the number of files, it's probably better to include that many file upload fields in the static form, then use the JavaScript to hide the superfluous ones, than to create them all dynamically. Then the form can still work when JavaScript is unavailable.

Side note: technically, single HTML file upload forms are already multiple file upload forms. According to the HTML form encoding standard, one should be able to select multiple files in the Browse dialogue box, and they'd be submitted as a multipart/mixed MIME structure.

However, almost nothing actually supports this. Older versions of Opera do on the client-side (and, I think, an ancient test browser of some sort, possibly Viola), and a few form-parsing components on the server-side, but not the PHP built-ins. In any case the UI is not very usable, so you're not missing much.