Using the DOM, it’s actually a relatively simple matter to conceal a file element once a file has been chosen, and add a new (empty) one in its place. It all happens so quickly, that it that there’s only one input element.To make it even smarter, you can then read the value of each element (ie.the name of the file to be uploaded) and build a list, in whatever format you like, of chosen files.

The code is heavily commented to explain a) how to use it and b) how it works, although I’ve also included a compressed, comment- and whitespace-free version which is significantly smaller.

I’ve tested it successfully with Mozilla Firefox 1.04, MSIE 6 and Opera 8 but I’m fairly confident that it’ll work with most, if not all, modern DOM-enabled browsers — if you can confirm or disprove this, please let me know.

One thing to be aware of when allowing mutliple uploads is that there are generally limits on the quantity of data that can be sent in any one request — for example, PHP has a default limit of 2MB (although this can be changed, using ini_set(‘upload_max_filesize’, ‘[ is the maximum number in megabytes — this will not work if safe mode is enabled on your host).

Enough waffling — here’s a demonstration: I’ve deliberately left all styling out of the class, so the list is ugly (you can edit this yourself quite easily).

And obviously there’s no submit button (I don’t want a load of junk files uploaded to my host, thanks) so I can’t show it ‘in action’ as such.

You’ll just have to take my word for it, that it really does work.

Or of course, download the (zipped) file and try it for yourself (don’t use the version included in this page, it’s slightly different).

Please note: As you will notice if you take the time to read this article, you will see no mention of the word ‘Ajax’ (apart from the ones in this paragraph). If you have a form where you want to allow a user to upload more than one file, you’re stuck with either adding as many file input elements as the number of files you want to upload, or possibly having new ones appear ‘magically’ through Javascript.

That’s because this technique has nothing whatsoever to do with Ajax — and I never claimed that it did. I was mulling over some ideas while walking home from work last week, when I came up with what I thought might be a quite cunning (and more atttractive and useable) way to allow a form to use a single file input element — sort of — to upload multiple files.