An XHR request with FormData is a POST empty pool,

Question

I am working on my own version of this .

Everything works, except for the POSTED values. var_dump on the PHP side shows an empty array. What's wrong?

function readfiles(files)
{
    console.log('Reading Files...');
    console.log(files);
    console.log("There are " + files.length + " elements to this array.");

    var formData = new FormData();
    formData.append('file', files[0]);
    console.log(formData);

    console.log("Posting XHR request...");
    // now post a new XHR request
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/devnull.php',false);

    console.log("sending data...");
    console.log(formData);
    xhr.send(formData);
}

$(document).ready(function(e) {
    $("#holder").on('dragenter',function(e) {
        e.preventDefault();         
        $(this).addClass('hover');
    });
    $("#holder").on('dragleave',function(e) {
        e.preventDefault();         
        $(this).removeClass('hover');
    });
    $("#holder").on('dragover',function(e) {
        e.preventDefault();         
        if(!($("#holder").hasClass('hover')))
            $("#holder").addClass('hover');
    });
    $("#holder").on('drop',function(e) {
        e.preventDefault();
        console.log(e.originalEvent.dataTransfer.files);
        $(this).removeClass('hover');
        readfiles(e.originalEvent.dataTransfer.files)           
        return false;
    });
});

Firebug tells me that there is an element in the array:

FileList {0 = File, length = 1, item = item (), more ...}

But after we add it to the FormData object, I get the following:

FormData {append = append ()}

And the last var_dump on the PHP side says the following:

<pre>array(0) {
}
</pre>

Answer 1

use this code to transfer file data

<?php var_dump($_FILES);?>