如何使用 JavaScript 在上傳之前驗證圖像尺寸？

使用 JavaScript 上傳之前驗證圖像尺寸

為了防止用戶上傳不合適的圖像，在允許圖像上傳之前建立驗證措施至關重要。本文將指導您完成在 JavaScript 中檢查圖像寬度和高度的過程。

現有 JavaScript 程式碼：

提供的 JavaScript 程式碼有效地檢查檔案類型和上傳映像的大小。然而，尺寸驗證尚未實現。

<code class="javascript">function checkPhoto(target) {
    if(target.files[0].type.indexOf("image") == -1) {
        document.getElementById("photoLabel").innerHTML = "File not supported";
        return false;
    }
    if(target.files[0].size > 102400) {
        document.getElementById("photoLabel").innerHTML = "Image too big (max 100kb)";
        return false;
    }
    document.getElementById("photoLabel").innerHTML = "";
    return true;
}</code>

影像尺寸驗證的實作：

要驗證影像尺寸，我們需要手動建立一個影像物件上傳的檔案。以下JavaScript 程式碼執行此操作：

<code class="javascript">var _URL = window.URL || window.webkitURL;
$('#file').change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        var objectUrl = _URL.createObjectURL(file);
        img.onload = function () {
            alert(this.width + " " + this.height);
            _URL.revokeObjectURL(objectUrl);
        };
        img.src = objectUrl;
    }
});</code>

示範和相容性：

您可以在JSFiddle 上查看此程式碼的工作範例：http://jsfiddle 。 net/4N6D9/1/.

需要注意的是，此方法僅在某些瀏覽器中受支持，主要是 Firefox 和 Chrome。

附加說明：

在使用 URL.createObjectURL() 方法之前，請注意該方法已被棄用，轉而將流分配給 HTMLMediaElement.srcObject。如需更多信息，請參閱官方文件。

以上是如何使用 JavaScript 在上傳之前驗證圖像尺寸？的詳細內容。更多資訊請關注PHP中文網其他相關文章！