2025-07-08

JS開發中如何獲取圖片的原始尺寸和上傳圖片大小

一、html5 中新的naturalWidth和naturalHeight屬性

在HTML 5中,新增加瞭兩個用來判斷圖片的寬度和高度的屬性,分別為naturalWidth 和 naturalHeight屬性,

例子如下:

var myimage = document.getElementById("myimage");
var rw = myimage.naturalWidth; // 真實圖片寬度
var rh = myimage.naturalHeight; //真實圖片高度

前提是:必須在圖片完全下載到客戶端瀏覽器才能判斷,目前在ie 9,Firefox, Chrome, Safari 和Opera都是可以使用的。


二、如果是不支持的版本瀏覽器,那可以用傳統方法判斷

例子如下:

var myimage = document.getElementById("myimage");
if (typeof myimage.naturalWidth == "undefined") {
  // IE 6/7/8
  var i = new Image();
  i.src = myimage.src;
  var rw = i.width;
  var rh = i.height;
}
else {
  // HTML5 browsers
  var rw = myimage.naturalWidth;
  var rh = myimage.naturalHeight;
}

JS獲取上傳圖片大小

獲取<input type="file" id='myinput'>上傳圖片的大小

$('#myinput')[0].files[0].size;  //單位b

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *