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.
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. Since you can only store file upload information in a file upload element (<input type=”file”>), you’ll always need to have one element per file to be uploaded. But what occurred to me is that you don’t need to display all those file elements.
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. And to keep doing so, as many times as you like. It all happens so quickly, that it appears 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. And with a little bit more code you can add the ability selectively to remove files that have been picked.
Maserati parts
