Glue chunks of files together in PHP

I've written a File API uploader, which essentially does the following:

1. User selects files to upload
2. The files are sliced into 20 kb chunks
3. The chunks are sent asynchronous to a php script
4. PHP waits until all chunks are uploaded, and then glues all the temporary files together
5. The file - glued together - is saved

However, PHP doesn't glue them together very well. Sometimes, the file is glued together well, but most of the times (especially on files with a lot of chunks) the file's are glued together wrong.

The js code: (works only in Firefox 4 beta):

 sendChunk: function(file, start, length) {
    var raw  = file.raw;
    var name  = file.name;
    var total  = file.size;

    var url = 'upload.php?name=' + encodeURIComponent(name) + '&total=' + total + '&start=' + start + '&length=' + length;
    var slice = raw.slice(start, length);
    var reader  = new FileReader();

    reader.readAsBinaryString(slice);
    reader.onload = function(e) {
        if(e.target.readyState === FileReader.DONE) {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", url);
            xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
            xhr.sendAsBinary(e.target.result);
        }
    };
};

The PHP code:

<?php
$filename = $_GET['name'];
$total = $_GET['total'];
$start = $_GET['start'];
$length = $_GET['length'];

$uploaded = $start + $length;
$percentage = round($uploaded / ($total / 100));
$remaining = $total - $uploaded;

$fd = fopen("php://input", "r");
while($data = fread( $fd, 10000000)) file_put_contents("./tmp/$filename.$start", $data, FILE_APPEND);

if($remaining <= 0) {
    $handle  = opendir('tmp/');
    $data   = '';
    $collection = array();

    while(($file = readdir($handle)) !== false) {
        $arr  = explode('.', $file);
        $name  = '';
        $start  = $arr[count($arr) - 1];

 开发者_StackOverflow       for($i = 0; $i < (count($arr) - 1); $i++) {
            if($name == '') $name .= $arr[$i];
            else $name .= '.' . $arr[$i];
        }

        if($name == $filename) {
            $collection[$start] = file_get_contents('./tmp/' . $file);
        }

        @unlink('./tmp/' . $file);
    }

    ksort($collection);

    foreach($collection as $key => $bin) {
        echo "(Added) $key: (binary data)\n";
        $data .= $bin;
    }

    if($data !== '') {
        file_put_contents('./uploads/' . $filename, $data);
    }

    closedir($handle);
} else {
    echo "Uploaded: $uploaded / $total ($percentage%)\n";
    echo "Remaining: " . $remaining . " (". (100 - $percentage) ."%)\n";
}
?>

Anybody has any idea? My guess is that the FileReader works asynchronous, and it somehow sends the wrong chunk with the wrong start & length parameters in the sendChunk method.

I am not familiar with the way you are sending the data to the server, but I my first guess would be to change

$fd = fopen("php://input", "r");

to

$fd = fopen("php://input", "rb");

so the stream-reader is binary-safe.

Edit:

Since I am not familiar with the php://input stream and I don't know exaclty what data it includes and in what format, I recommend using POST data instead both in client and serverside.

So I would change JS like this:

            var xhr = new XMLHttpRequest();
            xhr.open("POST", url);
            xhr.overrideMimeType("Content-type", "application/x-www-form-urlencoded");
            xhr.send('data='+encodeURIComponent(e.target.result));

and the PHP like this:

file_put_contents("./tmp/$filename.$start", $_POST['data']);