得到圖片原始的真實大小, 檢查input file的upload image 尺寸 - javascript

在這個例子中，展示了如何使用javascript來讀取input type="file" 上傳的圖片尺寸大小

直接上程式：
html :

<input id="imageUploader" type="file" accept="image/*"/>
<br/>
<img id="imageDisplayer" style="width : 300px; height: auto;"/>

Javascript :

var imageUploader = document.getElementById("imageUploader");
imageUploader.addEventListener("change", function(){
 window.URL;
  var image = new Image();
  image.onload = function(){
   var width = image.naturalWidth | image.width;
    var height = image.naturalHeight | image.height;
   console.log("width: " + width + ", height: " + height);
  };
  var objectURL = window.URL.createObjectURL(this.files[0]);
  image.src = objectURL;
  document.getElementById("imageDisplayer").src = objectURL;
});

主要是例用了window.URL.createObjectURL() 來得到上傳圖片的暫時url，
並建立一個 Image 物件來接收此 url ，並在 onload callback 裡得到 width 和 height，
#imageUploader下面那個#imageDisplayer只是預覽用，可有可無。
其中 Image 物件的 naturalWidth 和 natural Height 為上傳圖片的原始尺寸，
但怕有的瀏覽器沒有支援，所以在沒有支援時使用舊的 width, height 屬性

以下為上例程式碼的 jsfiddle 版本

參考資料：

1. HTML DOM Image Object
2. Get real image width and height with JavaScript in Safari/Chrome?
3. Check image width and height before upload with Javascript