Question

86

JS:How to send multiple files using FormData(jQuery Ajax)

rated 0 times [ 93] [ 7] / answers: 1 / hits: 61623 / 11 Years ago, sat, may 11, 2013, 12:00:00

In my form multiple file uploads are there,using FormData only one file is uploading ,though I'm selecting more than one file to upload,following is the code

HTML

<form name=uploadImages method=post enctype=multipart/form-data>

<input type=file name=photo[] value=>

<input type=file name=photo[] value=>

<input type=file name=photo[] value=>

</form>

JS

     var ajaxData = new FormData();

     ajaxData.append( 'action','uploadImages');

     jQuery.each($(input[name^='photo'])[0].files, function(i, file) {

        ajaxData.append('photo['+i+']', file);

      });

     $.ajax({

        url: URL,

        data: ajaxData,

        cache: false,

        contentType: false,

        processData: false,

        type: 'POST',

        dataType:'json',

        success: function(data) {

            if (data.status == 'success') {

                location.reload();

            }

        }

       });

I'm using PHP at server,using HTML attribute name i,e photo only I'm able to save files,dynamic file names won't be work for me.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

katelinb

Add To Favorites

Follow

Total Points: 535

Total Questions: 104

Total Answers: 109

Location: Burkina Faso

Member since Sun, Jun 13, 2021

3 Years ago

answered 11 Years ago cristopherh · Accepted Answer

You have an error in javascript: you're iterating only over files in one input please have a look at this

var ajaxData = new FormData();

ajaxData.append( 'action','uploadImages');

$.each($(input[type=file]), function(i, obj) {

        $.each(obj.files,function(j, file){

            ajaxData.append('photo['+j+']', file);

        })

});

example on jsfiddle