POST an Array using Jquery

Question

I am trying to UPLOAD multiple file using Post jQuery method but I get an error of undefined index when trying to view the array result. Tried to search the answers but still unable to do it. What is the correct way to do this. Below are the example of my codes,

HTML

<input type="file" name="others[]" multiple="multiple">

jQuery

$(document).ready(function(){   
 $("#submit").click(function(){
    var array = [$("input[name='others']").val()],
        others = {
            "upload[]": array,
        },
        id =  $("input[name='id']").val();
    $.post('updated-file-others.php',
    {
        others : others,
        id : id 
    }, function(data){
        $("#result_post").html(data); 
    });  
 });
});

PHP

if(isset($_POST['id'])){
  $id = $_POST['id'];
  $others = array($_FILES['upload']['name']);
}
echo "<pre>"; print_r($others); echo "</pre>";  

Answer 1

A couple of things

• $("input[name='others']") doesnt match others[] in your HTML. Why dont you use an id and match it?
• You might need to ensure that you have enctype="multipart/form-data" inside your form.
• whats the output of $("input[name='id']").val(); You have not provided any clue in your code.

Refer to php documentation on file upload - Uploading multiple files

Refer to this stackoverflow question - Multiple file upload in php

Answer 2

I would suggest formatting your desired array as a JSON string, and then using php_decode to convert it to an array.

$json = '["apple","orange","banana","strawberry"]';
$ar = json_decode($json);

echo $ar[0]; // apple

More info about JSON with PHP can be found here: http://www.dyn-web.com/tutorials/php-js/json/decode.php

Answer 3

The file upload via ajax using $.post doesn't work this way, to achieve this, you must configure the ajax call as follows:

$.ajax({
    type: 'POST',
    url: your_url,
    data: new FormData($('#form-id').get(0)),
    processData: false, //set it to false to send a DOMDocument, or other non-processed data
    contentType: false //pass false to tell jQuery to not set any content type header
}).done(function (data) {
    alert('success');
})

This will send you the entire form to the server, and there you can process the files and other fields as you want.

You can read a little more about the processData and contentType configuration in the jQuery ajax documentation

Please let us know if this work for you,

Greetings