js 验证图片格式和像素大小

最新推荐文章于 2024-07-06 22:56:54 发布

关老头

最新推荐文章于 2024-07-06 22:56:54 发布

阅读量2.6k

点赞数 1

分类专栏： JavaScript 文章标签： js javascript html5

本文链接：https://blog.youkuaiyun.com/weixin_40461030/article/details/119872598

版权

该博客探讨了如何使用JavaScript（特别是FileReader API）实现在用户选择图片后立即进行图片格式和像素大小的验证，以确保上传的图片符合要求。通过onchange事件触发验证，避免了异步加载导致的验证误差。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js 验证图片格式和像素大小

实现思路：

方法：validateImageSize中，
对象：FileReader，加载图片为异步加载；
所以，当提交form再校验图片格式、像素会导致结果错误，
故：可以用：onchange事件，在选择后就做验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="file" name="logo" id="logo" onchange="checkLogo('logo');" />


		<script src="./js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/**
			 * 【实现思路】：
			 * 方法：validateImageSize中，对象：FileReader，加载图片为异步加载；
			 * 所以，当提交form再校验图片格式、像素会导致结果错误，
			 * 故：可以用：onchange事件，在选择后就做验证
			 * 
			 */

			/**
			 * 验证logo
			 * @param id
			 * @returns {boolean}
			 */
			function checkLogo(id) {
   
				var logo = $("#" + id).val