为了防止用户上传不合适的图像,在允许图像上传之前建立验证措施至关重要。本文将指导您完成在 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中文网其他相关文章!