画像選択後に自動でサーバーに画像をアップ

JS

フォームにて、画像選択後に自動でサーバーに画像をアップすることができます。
ちなみにAndroidではカメラ画像でも撮影→サーバーアップが可能となっています。

ファイル送信側ソース

<html>
<head>
<script>
window.addEventListener("load", function(){
  if (!window.File){
    result.innerHTML = "File API 使用不可";
    return;
  }
  result.innerHTML = "画像を選択してください";
  document.getElementById("imageFile").addEventListener("change", function(){
    var reader = new FileReader();
    var file = document.getElementById("imageFile").files[0];
    result.innerHTML = "画像の設定を設定しています・・・";
    reader.onload = function(event){
      document.getElementById("img").src = reader.result;
      var file = document.getElementById("imageFile").files[0];
      var fileName = file.name;
      var fileSize = file.size;
      result.innerHTML = '【画像情報】<br/>ファイル名:' + file.name + '<br />' + '種類: ' + file.type + '<br />' + 'サイズ: ' + file.size + '<br />';
      $.ajax({
        type: 'POST',
        url: 'upload.php',
        data: {photo{$id}: event.target.result},
        success: function(){
          result.innerHTML = "画像の設定が完了しました！";
        },
        error: function(a, b, c){
          result.innerHTML = 'ファイルのアップロードに失敗しました。';
          console.log(a, b, c);
        }
      });
    }
  reader.readAsDataURL(file);
  } , true );
} , true );
</script>
</head>
<body>
<h2>画像ファイルで更新</h2>
<form>
  <input type="file" accept="image/*;capture=camera" id="imageFile"/>
</form>
<div id="result"></div>
<img id="img"width="100%">
</body>
</html>

受け取るPHP側ソース

<?php
//POSTデーターの中にbase64で送られるのでPHPがデコードできるように修正
$from_arr = array( " " , "data:image/png;base64," , "data:image/jpg;base64," , "data:image/jpeg;base64," , "data:image/gif;base64," );
$to_arr   = array( "+" , "" , "" , "" , "" );
//base64からバイナリ画像に変換
$photo    = base64_decode( str_replace( $from_arr , $to_arr , $_POST[ $photoname ] ) );
//先頭８文字からファイルの拡張子を判定する
$head = substr( $photo , 0 , 8 );
if (strncmp("\x89PNG\x0d\x0a\x1a\x0a", $head, 8) == 0) {
  $ext = ".png";
} else if (strncmp('BM', $head, 2) == 0) {
  $ext = ".bmp";
} else if (strncmp('GIF87a', $head, 6) == 0 || strncmp('GIF89a', $head, 6) == 0) {
  $ext = ".gif";
} else if (strncmp("\xff\xd8", $head, 2) == 0) {
  $ext = ".jpg";
} else {
  echo "拡張子が見つかりません";
  exit;
}
//ファイル出力
file_put_contents( "uploadedimage{$ext}" , $photo );
?>