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

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

為了確保用戶遵守圖像尺寸指南，在上傳之前檢查圖像寬度和高度非常重要.

檔案驗證

您現有的程式碼驗證檔案類型和大小。要新增圖像尺寸檢查，您需要從上傳的檔案建立圖像物件。

使用 createObjectURL()

現代瀏覽器中的 createObjectURL() 方法可讓您從檔案建立臨時 URL 物件。然後，您可以使用Image 物件非同步載入圖片：

<code class="javascript">const file = target.files[0];
const objectUrl = URL.createObjectURL(file);

const img = new Image();
img.onload = () => {
  console.log(`Width: ${img.width}, Height: ${img.height}`);
  URL.revokeObjectURL(objectUrl);
};

img.src = objectUrl;</code>

注意事項

• createObjectURL() 僅在現代瀏覽器（如Firefox、Chr ）中受支持、Opera。
• 必須呼叫 URL.revokeObjectURL() 方法來釋放暫時的完成後的 URL。

示範

在此處查看實例：https://jsfiddle.net/4N6D9/1/

注意： 如前所述，此方法是特定於瀏覽器的，可能無法在所有瀏覽器上一致地工作平台。

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