在提交表單之前獲取圖像的高度和寬度

Question

如何在使用jQuery或Javascript 提交表單之前獲取上載圖像的高度和寬度？

<input type="file" />

我需要檢查要上傳的圖像的寬度和高度是否等於所選的寬度和高度。 我找到了這個鏈接 。 但這僅適用於FF和Chrome，不適用於IE7和IE8。

誰能給我展示其他獲取尺寸的方法，以便它在所有瀏覽器中都能正常工作？

Answer 1

您可以創建一個圖像對象，創建圖像對象后，從顯示要上傳圖像的圖像標簽中獲取圖像，然后可以按照以下編寫的方法獲取圖像的尺寸。

var v=new Image();
v.src=document.getElementById("up_img").getAttribute('src');
alert(v.width);

記住，您將不得不使用Base64方法來獲取要在image標簽中顯示的圖像，我不知道是否支持該圖像，但它是Chrome，Firefox，Opera中可用的HTML5工具。

Answer 2

出於安全原因，IE9，IE8，IE7不支持訪問客戶端計算機上的文件； 這就是為什么您沒有得到任何寬度或高度的原因。 您需要將圖像上載到服務器上，然后將其顯示在某些圖像控件上並獲得高度和寬度。 您可以設置“ visibility:hidden如果您不希望圖像可見）。

鳥的觀點

一種方法是，在上載時，您會顯示一個進度條，同時使用Ajax將文件保存到服務器上的臨時文件夾中，並將圖像名稱作為臨時ID並將其存儲在數據庫中（以便以后可以將其刪除） ），然后將其顯示在圖像控件中。 然后獲得高度和寬度。