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 G

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

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.

Answer 3

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 4

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.