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

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


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


in front end

<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=""/>    <button id="btn">btn</button></form>        <script>            $(function(){     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);          $('#btn').on('click',function(){        $.ajax({        url:'https://stores-govan.c9users.io/test',          type:"POST",          data:ajaxData,          processData:false,          contentType:false,          success:function(){            },          crossDomain:true        })        })        })     });})</script>

at the backend (nodejs) add this(using multer)

var multer=require('multer')app.post('/test',upload.array('photo[]',6),function(req ,res,next){            var images=[]               if(req.files){               for(var i=0;i<req.files.length;i++){               images[i]=req.files[i].filename }               }               console.log(images)        })


<input type="file" name="Attachment[]" class="form-control TheFiles" />

The previous answer has a little error that was fixed on the next code, and gonna works to send multiple files via ajax:

var formData = new FormData();        $.each($(".TheFiles"), function (i, obj) {                            $.each(obj.files, function (j, file) {                                    formData.append('Attachment[' + i + ']', file); // is the var i against the var j, because the i is incremental the j is ever 0            });        });        formData.append('Destination', Destination); //add more variables that you need        formData.append('ReplyTo', ReplyTo);//add more variables that you need        formData.append('Body', Body);//add more variables that you need

optionally just for you can see my ajax config

$.ajax({             url: 'YourUrl',            type: 'POST',            data: formData,            async: false,             success: function (data) {                location.reload();            },            complete: function () {                $(Here).text('Enviado com sucesso');            },            error: function (err) {                alert("Não deixe nenhum campo vazio");            },            cache: false,            contentType: false,            processData: false        });