Image uploader - help required

JavaScript
1

Hi,

I have a site which requires the user to upload multiple images at once. Using jQuery I have set it up so that the user can select individuals individually (using the file browser) and then upload them all at the same time bty clicking ‘Upload’. However, this is not really good enough…

What I need to happen is that when the user browses their machine to select their images, they are able to select multiple images through CTRL+click. At the minute they can only select one image at a time. How can this be achieved?

As I already have the upload process working perfectly, I would prefer that I was able to keep this intact and simply add some javascript which allowed multiple images to be selected by the file browser at the same time. I would also prefer, if possible, not to use flash.

Does anybody have any ideas? All suggestions are appreciated.

Thanks.

2

This problem is solved by Firefox 3.6 and Webkit (i.e. Safari and Chrome), which allows this to be done natively, by adding the multiple="true" attribute.

The only other possible solution is to use Flash, via something like SWFUpload. It can allow the user to select multiple images at once and when combined with JavaScript it works pretty well. The downside, of course, is that it requires Flash. This is an excellent case for progressive enhancement:

  1. If supported, use native method. Don’t check the user agent string, check for the existence of the FileList object (if (typeof FileList)).
  2. If user has JS enabled AND Flash, use SWFUpload
  3. If user has JavaScript enabled, use a single file upload box and queue them up below (user has to choose files one by one) - example
  4. If user doesn’t have JS on, then either provide multiple file upload boxes or force the user to upload one at a time.