Question

I’m practicing my jQuery skills (ok, learning too) and experienced an issue. I got a file upload form with file input. I’m using this plugin (http://www.fyneworks.com/jquery/multiple-file-upload/#tab-Uploading) to upload multiple files at once. So I’m using following form input:

<input type="file" class="multi" name="photo[]" accept="gif|jpg|jpeg|png" maxlength="5"/>

Now… I’m trying to send an AJAX request to php file that will handle upload and server-side validation:

$('#upload_photos_s').click(function(q){

    var photo = $('[name=photo[]]').val();

    // Process form
    $.ajax({
        type: "POST",
        url: "upload.php",
        data: 'photo[]='+photo,
        success: function(html){
            alert($('[name=photo[]]').val());
            $("#photo_upload_form").html(html);
        }
    });             
    return false;
});

While using Firebug I can see that there’s only one file in photo[].

Any suggestions why? Is there something I missed?

Regards,
Tom

Answer 1

As it stands, you are indeed querying the value of the first photo[] member only. photo[].val() will not return an array containing all the values.

You would have to run through each member of photo[], e.g. using each(), to build an array of values.

However, I’m not sure this is the right path to go for whatever you want to do. You are aware that what you are doing is uploading the file names only, not their data?

It is not possible to upload files using AJAX without the help of additional tools like Flash-based SWFUPload. This is for security purposes to prevent scripts from having direct access to local files.

Maybe what you’re trying to do is best suited for an approach where the form’s target property points at an <iframe>. That would not trigger a reload of the page, but still submit the form the “traditional” way, allowing for old-school file uploads.