Javascriptista

現在firefoxでしか動作しません。
SAMPLE
※PHPが動作する環境ではないのでサンプルだけ公開しています。
基本的には前回の｢ローカルの画像を画面に表示させる。」と同様、HTML5のドラッグ＆ドロップを使用しています。

---

<script language="javascript" type="text/javascript">

onload = function(){
  var element = document.getElementById('dragDrop');
  //ユーザーに｢使わない」ことを明示するのが仕様らしい。。。
  element.ondragover = preventer;
  element.dragenter = preventer;
  //イベント登録
  element.ondrop = dropping;
}

function preventer(e){
  e.preventDefault();
}

function dropping(e){

  var files = e.dataTransfer.files;

  //HTTP_REQUESTオブジェクト生成
  var httpRequest;
  //I.E.の場合
  if(typeof ActiveXObject != "undefined"){
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if(!httpRequest && typeof XMLHttpRequest != "undefined") {
    httpRequest = new XMLHttpRequest();
  }
  httpRequest.open('post', "./index.php",true);
 
  //データ受信後の処理を記載
  httpRequest.onreadystatechange = function(){
    if(httpRequest.readyState != 4){
      return;
    }
  }

  if(typeof FileReader != "undefined"){
    //I.E.はFileReader未実装
    reader = new FileReader();
    reader.onload = function(evt) {
      httpRequest.sendAsBinary(evt.target.result);
    };
    reader.readAsBinaryString(files[0]);
  }
  if(e){
    e.preventDefault();
  }else{
    event.preventDefault();
  }
}
</script>

---

1.FileReaderでreadAsBinaryStringメソッドを使用するとreader.onloadイベント内でバイナリデータを取得できます。それをバイナリ方式で転送しています。


PHPでは以下のようにリクエスト情報をまるまる画像ファイルにしています。

---

<?php

$post = fopen("php://input", "rb");
//$data = fread($post);
$data = stream_get_contents($post);

$fp = fopen("./test.jpg", "wb");
fwrite($fp,$data);

fclose($fp);
fclose($post);
?>

---

※通常のmulti-partなアップロード方式ではありません。統一させたい場合、自力で書式を記載しなければなりません。