ブラウザ上でtype=fileのinputでアップされた画像の縦横サイズを取得する

入力画面で、アップされた画像に対するパラメータを設定する機能を実装することになりそうなので予備調査。

type="file"にアップされたファイルの画像サイズを取得するには、
FileReaderオブジェクトのreadAsDataURLを使って読みこんだデータをImageオブジェクトのsrcに入れてやればサイズが取得できるみたい。

<script>
  function fileload() {
    if ( ! file.files[0] ){
      return;
    }   
    image = new Image();
    reader = new FileReader();
    reader.onloadend = function() {
      image.src = reader.result;
      image.onload = function() {
        result = {width: image.naturalWidth, height: image.naturalHeight};
        console.log(result);
      }   
    }   
    reader.readAsDataURL(file.files[0]);
  }   
</script>
<input type="file" id="file" onchange="fileload()">

参考:
JavaScriptで縮小画像の作成
FileReader.readAsDataURL()
Image

追記：

コメントで @gtk2k さんに教えて頂きました。

<script>
  function fileload() {
    if ( ! file.files[0] ){
      return;
    }
    image = new Image();
    image.onload = function() {
      result = {width: image.naturalWidth, height: image.naturalHeight};
      console.log(result);
    }
    image.src = URL.createObjectURL(file.files[0]);
  }
</script>
<input type="file" id="file" onchange="fileload()">

URL.createObjectURLでもとれるようです。
こちらの方が短くてシンプルですね。