XMLHttpRequest - 发送文件？

Question

On my forms submission I have:

var formData = new FormData();

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

        }

On my server side I just dump the $_POST.

I get:

array(1) {
 ["file"]=>
  array(1) {
    [0]=>
   string(17) "[object FileList]"
 }
}

It's coming through as a string, how can I get it as an array of files?

Here's the whole request:

var formData = new FormData();

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

        // now post a new XHR request
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/site-manager-gateway/add-content');
        xhr.onload = function () {
            if (xhr.status === 200) {
                console.log('all done: ' + xhr.status);
            } else {
                console.log('Something went terribly wrong...');
            }
        };

        xhr.send(formData);

Answer 1

Missing things

Add this before send:
xhr.setRequestHeader("Content-Type","multipart/form-data");

Accessing the files

After that, the files can be access like this:

$count = count($_FILES['file']['name']);
for($i=0; $i<$count; $i++)
{
   echo 'Uploaded File With FileName: '.$_FILES['file']['name'][$i].'<br/>';

}

More Info: $_FILES variable

http://www.php.net/manual/en/reserved.variables.files.php

If you go to this link you will see that the $_FILES variable will be like this:

array(1) {
    ["upload"]=>array(5) {
        ["name"]=>array(3) {
            [0]=>string(9)"file0.txt"
            [1]=>string(9)"file1.txt"
            [2]=>string(9)"file2.txt"
        }
        ["type"]=>array(3) {
            [0]=>string(10)"text/plain"
            [1]=>string(10)"text/plain"
            [2]=>string(10)"text/plain"
        }
        ["tmp_name"]=>array(3) {
            [0]=>string(14)"/tmp/blablabla"
            [1]=>string(14)"/tmp/phpyzZxta"
            [2]=>string(14)"/tmp/phpn3nopO"
        }
        ["error"]=>array(3) {
            [0]=>int(0)
            [1]=>int(0)
            [2]=>int(0)
        }
        ["size"]=>array(3) {
            [0]=>int(0)
            [1]=>int(0)
            [2]=>int(0)
        }
    }
}

"But...where are my files??"

Your files are located in a temporally folder (In linux, the default is /tmp).
The only way to recover your files from this temporally folder is using on each file the php function:

move_uploaded_file

Which according to the php documentation:

"This function checks to ensure that the file designated by filename is a valid upload file (meaning that it was uploaded via PHP's HTTP POST upload mechanism). If the file is valid, it will be moved to the filename given by destination.

This sort of check is especially important if there is any chance that anything done with uploaded files could reveal their contents to the user, or even to other users on the same system."

move_uploaded_file Usage

This is how you should do it. If you uploads directory is called "uploads" then:

<?php
$uploads_dir = '/uploads';
foreach ($_FILES["file"]["error"] as $key => $error) {
    if ($error == UPLOAD_ERR_OK) {
        $tmp_name = $_FILES["file"]["tmp_name"][$key];
        $name = $_FILES["file"]["name"][$key];
        move_uploaded_file($tmp_name, "$uploads_dir/$name");
    }
}
?>

And that will save all your files in the "/uploads" directory.