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

Question

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.

Andre Figueiredo · Accepted Answer · 2016-09-13 16:37:08Z

23

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

edited Sep 13, 2016 at 16:37

Andre Figueiredo

13.5k8 gold badges52 silver badges75 bronze badges

answered May 11, 2013 at 11:56

Yuriy

4163 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mahesh.D Over a year ago

its working fine,but the issue is when I upload same files(which have same names) then getting error,is there any chance to handle this.

Mahesh.D Over a year ago

Yuriy thanks for your help, the error which described above is server side error,nothing do with JS.Though I'm describing the error: when choose same file twice at time then I getting error 500 i,e. Internal server error.

Mahesh.D Over a year ago

Yuriy,can look at this,if get any idea,let me know please.Thanks

Nate Anderson Over a year ago

I think PHP likes [], I think MVC likes [0]

Govan · Accepted Answer · 2018-02-08 13:38:29Z

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

Enrique Mingyar Torrez Hinojos · Accepted Answer · 2017-10-11 13:14:32Z

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

Mickaël Leger · Accepted Answer · 2019-11-15 13:39:57Z

0

This works fine:

var data = new FormData();
for( var i = 0, len = document.getElementById('attachment').files.length; i < len; i++ ){
    data.append( "files" + i, document.getElementById('attachment').files[i] );
}

edited Nov 15, 2019 at 13:39

Mickaël Leger

3,4482 gold badges21 silver badges37 bronze badges

answered Nov 15, 2019 at 12:20

Yaovi TCHUISSI

11 bronze badge

Comments

Karup · Accepted Answer · 2015-07-02 22:48:32Z

-1

Those answers do not work.

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);//i had to change "i" by "j"
    })
});

edited Jul 2, 2015 at 22:48

Karup

2,0793 gold badges23 silver badges49 bronze badges

answered Jul 2, 2015 at 21:40

Dalir

1

Collectives™ on Stack Overflow

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

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related