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

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

M. Eriksson · Accepted Answer · 2017-07-28 12:49:07Z

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, 2017 at 12:49

answered Jul 28, 2017 at 12:39

M. Eriksson

13.7k4 gold badges31 silver badges42 bronze badges

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

3 Comments

Philip Lisitsyn Over a year ago

How is this array structured in $_FILES?

M. Eriksson Over a year ago

Do a print_r($_FILES['userfile]); and check. Don't have the code in front of me.

M. Eriksson Over a year ago

@PhilipLisitsyn Did it solve your problem? If yes, feel free to accept it and if no, please let me know what happened.

Collectives™ on Stack Overflow

Sending multiple files using ajax without using html form

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related