Question

I’m building a website where users can upload images. I don’t want to use a flash plugin like SWFUpload or Uploadify, but I would like them to be able to upload multiple images at once. This would lead me to use a file input with the multiple="" attribute set. Problem with that is, the user can only select multiple images from the same directory on their computer.

To counter this, I had an idea that involves Javascript. I have a file input on my page with the multiple attribute set, and when the user selects some files with that file input, I then hide it with CSS. After that, I use Javascript to place a new file input in its place, which the user can use to upload more files from different directories. That way, when the user has all the images they want to upload, I have a form with multiple file inputs being sent which I can handle using PHP as my backend.

This is my relevant markup:

<div id="select_images">
    <input type="file" name="files[]" multiple="multiple" />
</div>

And my Javascript (using the jQuery library):

$('#select_images input:first').change(function(){
    // User selected some images to upload, hide this file input
    $(this).css('right', '-10000px');

    // Place a new file input to take its place
    $(this).before('<input type="file" name="files[]" multiple="multiple" />');
});

At the moment, if I select some images to upload, jQuery correctly hides the current file input and places a new one where the old one was. So the markup is now this:

<div id="select_images">
    <input type="file" multiple="multiple" name="files[]">
    <input type="file" multiple="multiple" name="files[]" style="right: -10000px;">
</div>

This is where the problems are. If I select more files to upload using the new file input that was placed with jQuery, nothing happens. The new file input inserted using jQuery doesn’t seem to accept the file, as Firebug isn’t showing any file data relating to the input. Is there some sort of security in place stopping me from putting files in an input inserting into the DOM using Javascript?

Thanks!

Answer 1

This method works fine, BUT. Every time you create a new file input, you can actually start submitting that field right away. If you create a hidden iFrame on the page, the form can use the iFrame as a target and thus start the upload process immediately.

Meanwhile, you can create a new form element with a new file field inside it. Rinse and repeat!

As for your particular trouble, there isn’t any security restriction. Are you basing the issue strictly off Firebug, or have you tried to POST the form to the server? There ARE security restrictions regarding javascript’s ability to look at the value of a file input, and this can affect Firebug.