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)
})