Send array of files using AJAX

Question

Say I have an array which contains a few images:

var images = [image1, image2, image3]

How do I send these images to a php file using AJAX in a single request?

The following code did not work:

$.ajax({
    url: 'PHP/posts.php',
    type: 'post',
    data: {data: images},
    success: function(data) {
      alert(data);
      location.reload();
    }
  });

My HTML:

<div id="newPostFile">
    <label for="newPostFiles"><i class="fa fa-file-text-o" id="newPostFileIcon" aria-hidden="true"></i></label>
    <input type="file" name="newPostFiles" id="newPostFiles">
</div>

Endgoal: Whenever a file is selected, the file is added to the array and when the submit button is clicked, all the files are uploaded at once.

Did you used a list of <input type="file"> input in your html? — Ataur Rahman Munna
– Ataur Rahman Munna, Commented Aug 6, 2017 at 10:43
Read up on FormData, you will be able to append your image data to this object, and post via ajax... — Stuart
– Stuart, Commented Aug 6, 2017 at 10:44

adeneo · Accepted Answer · 2017-08-06 10:44:55Z

6

You have to send files as formData

var images = [image1, image2, image3]
var data   = new FormData();

images.forEach(function(image, i) {
    data.append('image_' + i, image);
});

$.ajax({
    url: 'PHP/posts.php',
    type: 'post',
    data: data,
    contentType: false,
    processData: false,
    success: function(data) {
       console.log(data);
       location.reload();
    }
});

But as you're reloading the page anyway, why use ajax at all ?

answered Aug 6, 2017 at 10:44

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

3 Comments

Shreyas Sreenivas Over a year ago

Im basically creating a social media site and this ajax request happenns when i click on post

Shreyas Sreenivas Over a year ago

How do i get the images in the php file when i do this?

adeneo Over a year ago

The usual way, with $_FILES

Tushar Gupta · Accepted Answer · 2017-08-06 10:50:39Z

1

You can pass a JSON object to PHP, which would be the convenient solution here

var data ={'image1':image1,'image2':image2};

You can pass this object to the php code and then parse it:

Pass the object as a string:

AJAX call:

$.ajax({
    type    : 'POST',
    url     : 'PHP/posts.php',
    data    : {result:JSON.stringify(data)},
    success : function(response) {
        alert(response);
    }    
});

You can handle the data passed to the result.php as :

$data    = $_POST["result"];
$data    = json_decode("$data", true);

//just echo an item in the array
echo "image1 : ".$data["image1"];

Another option would be serializing the array before sending, or convert it into a comma separated string using array.join, then parse/split on the posts.php

 array.join(",")

answered Aug 6, 2017 at 10:50

Tushar Gupta

16k1 gold badge33 silver badges53 bronze badges

1 Comment

Jonas Wilms Over a year ago

Have you checked performance? Im not shure what happens if youre stringifying a few hundred images ... :/

A. El-zahaby · Accepted Answer · 2021-12-16 16:55:19Z

1

you can just use the list symbol after the input name [i]

for example:

let formData = new FormData();

let files = fileInput.prop('files');
for (let i = 0; i < TotalFiles; i++) {
    formData.append('file['+i+']', files[i]);
}

answered Dec 16, 2021 at 16:55

A. El-zahaby

1,17212 silver badges37 bronze badges

Comments

Ataur Rahman Munna · Accepted Answer · 2017-08-06 10:54:18Z

0

Use FormData Object to send files using ajax.new FormData($('#your_form_id')[0]) automatically appends all form input in FormData object which we can be done by manually formData.append('file1',file1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
let formData = new FormData($('#your_form_id')[0]);
    $.ajax({
        url: 'PHP/posts.php',
        type: 'POST',
        data: formData,
        dataType:'json',
        processData: false,
        contentType: false,
        success: function(response) {
            console.log(response);
            location.reload();
        },
        error: function() {
            console.log('fail');
        }
    });
</script>

edited Aug 6, 2017 at 10:54

answered Aug 6, 2017 at 10:47

Ataur Rahman Munna

3,9151 gold badge25 silver badges35 bronze badges

Collectives™ on Stack Overflow

Send array of files using AJAX

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related