使用Javascript 驗證上傳的圖像尺寸
在Javascript 中實現圖像上傳表單時，確保上傳的圖像滿足特定的尺寸要求至關重要。本文探討了影像尺寸驗證過程中面臨的常見問題：檢索所選影像的寬度和高度。
問題
以下Javascript 函數，旨在檢查檔案類型和大小，無法擷取影像尺寸：
<code class="javascript">function checkPhoto(target) {
if(target.files[0].type.indexOf("image") == -1) {
// Code to handle file type
}
if(target.files[0].size > 102400) {
// Code to handle image size
}
// No code yet for image width and height
}</code>The解決方案
要擷取影像尺寸，我們需要從所選檔案建立一個影像物件。這可以使用 URL.createObjectURL() 方法來實現：
<code class="javascript">var _URL = window.URL || window.webkitURL;
$(function() {
$("#file").change(function (e) {
var file, img;
if ((file = this.files[0])) {
img = new Image();
var objectUrl = _URL.createObjectURL(file);
img.onload = function () {
console.log(this.width + " " + this.height);
_URL.revokeObjectURL(objectUrl);
};
img.src = objectUrl;
}
});
});</code>此程式碼片段建立一個 Image 物件並使用 img.src 載入所選檔案。圖片載入完成後，會執行回呼函數 img.onload，我們可以在其中取得圖片的寬度和高度。
相容性說明
URL.createObjectURL( ) 方法並未得到跨瀏覽器的普遍支援。它主要在 Firefox 和 Chrome 中受支援。對於其他瀏覽器，可能需要替代方法來驗證圖片大小。
以上是如何在 JavaScript 中檢索圖像尺寸以進行上傳驗證？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
