ブラウザに画像ファイルをドラッグアンドドロップして表示

仕様

HTMLのドロップエリアに画像ファイルを落とすと、表示エリアに画像が表示される
テスト段階なので無駄がおおいかもしれないがとりあえず動く

ソース

HTML

test_8.htm

<html>
<head>
<link rel="stylesheet" type="text/css" href="test_8.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="test_8.js"></script>
<title>test_8 ブラウザに画像ファイルをドラッグアンドドロップして表示</title>
</head>
<body>
<div id="droparea">ファイルをドロップしてください。</div>
<div id="viewarea">ここに表示</div>
</body>
</html>

CSS

test_8.css

#droparea,#viewarea{
border: gray solid 1em;
padding: 2em;
}

javascript

test_8.js

$(function() {
  $("#droparea").on({
    "dragenter dragover":function(e){
      e.preventDefault();
    },
    "drop":function(e){
      var file = e.originalEvent.dataTransfer.files[0];
      var fr1 = new FileReader();
      fr1.onload = function(e) {
        var blob=new Blob([e.target.result],{"type":file.type});
        var fr2 = new FileReader();
        fr2.onload = function(e) {
          var src=e.target.result;
          src=new Uint8Array(src);
          src=String.fromCharCode.apply("",src);
          src=btoa(src);
          src="data:"+file.type+";base64,"+src;
          $("<img>").attr({"src":src,"alt":file.name}).appendTo('#viewarea');
        }
        fr2.readAsArrayBuffer(blob);
      }
      fr1.readAsArrayBuffer(file);
      e.preventDefault();
    },
  });
});

検証

今後の調整課題

そもそもfilereaderは2ついるのか？
バイナリの中間形式に無駄はないのか？
サイズが大きなデータでメモリオーバーがおきないのか？

動作確認

各Windows版

IE11
Edge
Firefox56
Chrome62