gpt4 book ai didi

javascript - 使用文件 API 验证表单提交的图像尺寸高达 150X50px

转载 作者:行者123 更新时间:2023-11-28 08:57:33 26 4
gpt4 key购买 nike

如何使用 jquery 中的文件 API 验证表单提交的图像尺寸高达 150X50px。?

请帮忙..

最佳答案

您可以引用https://developer.mozilla.org/en-US/docs/Web/API/FileReader中的文件阅读器阅读有关如何执行此操作的信息。这是此页面的代码片段。

在图像上使用 onLoad 事件处理程序来获取高度和宽度属性以验证它们。这是一个例子Javascript Image onload event binding

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

oFReader.onload = function (oFREvent) {
document.getElementById("uploadPreview").src = oFREvent.target.result;
};

function loadImageFile() {
if (document.getElementById("uploadImage").files.length === 0) { return; }
var oFile = document.getElementById("uploadImage").files[0];
if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
oFReader.readAsDataURL(oFile);
}
</script>
</head>

<body onload="loadImageFile();">
<form name="uploadForm">
<table>
<tbody>
<tr>
<td><img id="uploadPreview" style="width: 100px; height: 100px;" alt="Image preview" /></td>
<td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td>
</tr>
</tbody>
</table>

<p><input type="submit" value="Send" /></p>
</form>
</body>
</html>

关于javascript - 使用文件 API 验证表单提交的图像尺寸高达 150X50px,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18231981/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com