@blog.justoneplanet.info

前回の記事に以下の質問がありました。

質問なのですがバイナリデータはsendでは送れないのでは？
自分も同じようなことをしているのですがFireFox限定のsendAsBinaryでないと無理でした。
どのようにして転送してるのでしょうか？

えーと。。。(･Θ･;)。。。あの、その。。。うかれててサーバ側を考えてませんでした。すみませんm(_ _)m

■クライアント側のコード

前回のコードとおなじ。

function dragStart(e){
    //e.preventDefault();
}
function dragEnter(e){
    //e.preventDefault();
}
function dragOver(e){
    e.preventDefault();
}
function drop(e){
    var files = e.dataTransfer.files;
    for(var i = 0; i < files.length; i++){
        var request = new XMLHttpRequest();
        request.upload.onprogress = function(e){
            document.getElementById('progress').style.width = ((e.loaded / e.total) * 100 + "%");
        }
        request.upload.onload = function(e){
            document.getElementById('progress').style.width = '0px';
            alert('finished');
        }
        request.open('post', "./index.html");
        request.send(files[i]);
    }
    e.preventDefault();
}

サーバー側

今回のケースは、$_FILESなどでファイルを取得することはできない。以下のようにして生のPOSTデータを取得しなければならない。

$post = fopen("php://input", "r");
file_put_contents('./test.png', $post);//ファイル名はテストなので固定=3
fclose($post);

ちゃんと受け取れるヽ(^◇^*)/。簡易的なコードなので実環境ではフィルタリングしてください。

■sendAsBinaryとsendを比較して使ってみる

以下はsendAsBinaryを使ったサンプルである。

request.open('post', "./index.html");
request.sendAsBinary(files[i].getAsBinary());

上述のコードが以下のコードに対応する。

request.open('post', "./index.html");
request.send(files[i]);

まとめ

1. 引数がFileオブジェクトの時はsendを使用する
2. 引数がBinary文字列の時はsendAsBinaryを使用する
3. 引数がBinary文字列の時にsendを使用すると途中でデータがカットされてしまう

なるほど！

sendAsBinaryとは

A variant of the send() method that sends binary data.

sendAsBinaryはsendメソッドの変異体らしい。

This data is converted to a string of single-byte characters by truncation (removing the high-order byte of each character).

シングルバイト文字列に変換されるらしい。

request.open('post', "./index.php", true);
var boundary = '------multipartformboundary1276452374015';
request.setRequestHeader(
    'content-type',
    'multipart/form-data; boundary=' + boundary
);
request.setRequestHeader(
    'content-length',
    files[i].size
);
request.sendAsBinary(
    '--' + boundary + '\n' +
    'Content-Disposition: form-data; name="file"; filename="test.png"\n\n' +
    'Content-Type: application/octet-stream\n\n' +
    files[i].getAsBinary() + '\n' +
    '--' + boundary + '--'
);

var_dump($_FILES);
/*
array(1) {
  ["file"]=>
  array(5) {
    ["name"]=>
    string(8) "test.png"
    ["type"]=>
    string(0) ""
    ["tmp_name"]=>
    string(14) "/tmp/sdhfhsg"
    ["error"]=>
    int(0)
    ["size"]=>
    int(10)
  }
}
*/

勉強になったー=3