Send multiple file attachments to php file using ajax

Question

I have the following html code inside a form:

<input type="file" id="attachments" name="attachments" multiple>

I already have a javascript function that handles the onsubmit for the form using ajax but without handling the uploaded files.

This is the part of my javascript function that sends the data to the required php file:

var to_users = $("#to_users").val();            
var title = $("#title").val();
var content = $("#content").val();

var data = {
    to_users:to_users,
    title:title,
    content:content
}

$.ajax({url: "submit.php", type:"POST" , data:data ,success: function(result){

    // does something
}});

There are many tutorials and questions online about attachments using ajax and php but none of them handles multiple files. My question is: what do I need to add to this function so that I send the attached files to the php file ? And what should I write in the php file in order to handle the files it receives?

Poonam · Accepted Answer · 2016-06-13 07:09:44Z

4

To upload multiple images use array:

<input type="file" id="attachments" name="attachments[]" multiple>

and send the form data using ajax:

 var formData = new FormData(this);
$.ajax({
    url: "submit.php",
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function(result){

    // do something
   }
});

In php file use a loop( foreach i recommend) to save all attachments.

foreach($_FILES['attachments']['name'] as $key=>$val){

// do whatever you want

}

edited Jun 13, 2016 at 7:09

answered Jun 9, 2016 at 12:24

Poonam

5494 silver badges15 bronze badges

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

4 Comments

unknown_111 Over a year ago

it didnt work.. i put in the php code if(isset($_POST["attachments"])) echo "attached"; but it didnt echo anything

Poonam Over a year ago

Use $_FILES not $_POST

unknown_111 Over a year ago

okay now it worked.... can i now directly insert the attachments into a database using a pdo update query inside the foreach loop ?

Poonam Over a year ago

ofcourse, you can. Inside foreach loop insert attachments into database and move into folder too.

Quentin · Accepted Answer · 2016-06-09 12:04:56Z

3

There are quite a lot of questions that are almost duplicates, but they all suffer from creating a FormData object and then adding fields to it one-by-one … which fails to show how to handle multiple file inputs (and is a long-winded and fragile approach to the problem).

Just pass the form element as the argument to the FormData object instead.

var formData = new FormData(document.querySelector("form"));
$.ajax({
    url: "submit.php",
    type: "POST",
    data: formData,
    processData: false,
    contentType: false
});

answered Jun 9, 2016 at 12:04

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Collectives™ on Stack Overflow

Send multiple file attachments to php file using ajax

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related