Sending multiple files using ajax without using html form

Question

Im using single file input field with multiple upload property. I've already tested single file pass like that and it worked. Now I'm trying to pass files using an array but there is a mistake. There is no form.

HTML:

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

JS:

var formData = new FormData();
var files = [];
for(var i = 0; i < length; i++) {
    files[i] = $('input', '#fileInfo')[0].files[i];
}
formData.append('userfile', files);
$.ajax({
    url: "example.php",
    data: formData,
    type: 'POST',
    dataType: 'json',
    processData: false,
    contentType: false,
    success: function(res)
    {
        console.log("done");
    }
});

PHP:

<?php
$length = sizeof($_FILES['userfile']['name']);
json_encode(array($length));

error.log:

PHP Notice:  Undefined index: userfile in /path/to/php on line 2, referer: http://localhost/test

https://stackoverflow.com/questions/19617996/file-upload-without-form — safin chacko, Jul 28 '17 at 12:32
The full code example given here https://stackoverflow.com/questions/45326498/ajax-to-php-image-upload/45326793#45326793 — Anand Pandey, Jul 28 '17 at 12:38
try to using this example of the github and let me know if any issue : https://github.com/rodrigowbazevedo/simpleUpload — Pratik Soni, Jul 28 '17 at 12:38

M. Eriksson · Accepted Answer · 2017-07-28T12:49:07.853

6

Instead of building an array with the files (which is kind of strange to do since the source already is an array), append the files directly to your FormData object:

var formData = new FormData();

// Get all the files so we easily can get the length etc.
// Not necessary, but it will make the code easier to read.
var files = $('input', '#fileInfo')[0].files;

for(var i = 0; i < files.length; i++) {
    formData.append('userfile[]', files[i]);
}

$.ajax({
    // your ajax call
});

We've also changed 'userfile' to 'userfile[]' which will make it an array that you can loop through in your PHP.

edited Jul 28 '17 at 12:49

answered Jul 28 '17 at 12:39

M. Eriksson

13,450
4
29
40

How is this array structured in $_FILES? – Philip Lisitsyn Jul 28 '17 at 12:48
Do a `print_r($_FILES['userfile]);` and check. Don't have the code in front of me. – M. Eriksson Jul 28 '17 at 12:49
@PhilipLisitsyn Did it solve your problem? If yes, feel free to accept it and if no, please let me know what happened. – M. Eriksson Jul 28 '17 at 13:00

Sending multiple files using ajax without using html form

1 Answers1

Linked