如何在 JavaScript 中檢索圖像尺寸以進行上傳驗證？

使用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中文網其他相關文章！