web工程上传图标验证尺寸（高、宽）

最新推荐文章于 2026-06-20 13:08:59 发布

原创最新推荐文章于 2026-06-20 13:08:59 发布 · 1.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#图标尺寸验证 #图标上传

JAVA 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种在前端和后端实现图标上传及尺寸验证的方法。包括使用JavaScript进行前端尺寸检查，解决Spring MVC环境中出现的问题，以及通过表单异步提交进行服务端验证的过程。

需求描述：要做图标上传，限制大小18*18。

遇到问题：

1、最开始想用js判断图片的尺寸，不想把文件上传到服务端后再判断尺寸。最开始找到了方法并在html页面中测试通过（IE7、8、9）。但是将静态页面拷贝到spring mvc架构下的web工程中就有问题，一直获取不到图标的高宽。怀疑是spring mvc哪里配置影响到了。

2、后来没办法，只好将文件上传到服务端进行验证。用ajaxFileUpload插件异步上传，在选择文件的时候直接判断，并提示用户。但是这种方法有一个问题，文件上传后，原来的file域内容会被清空，不能二次上传。网上说的修改ajaxFileUpload.js源文件，将

var newElement = $(oldElement).clone(); 改为
var newElement = oldElement.clone(true);

是行不通的。因为IE有安全限制，不能通过代码对file域赋值，所以clone方法不会将选择的路径复制。复制不成功也就没办法在保存功能将图标再次上传到服务端。

3、ajaxFileUpload也淘汰，最后改为jquery的表单异步提交方式进行验证。

思路如下：添加file域的change事件，提交表单，在后台获取图标，并判断图标是否符合规格。

代码如下：

通过js判断图标尺寸方法如下，IE7、8、9亲测通过，但是将代码拷贝到spring mvc架构下的web工程中，就有问题，暂时不知道问题在哪里，怀疑是spring mvc哪里配置问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<script type="text/javascript">
	
	function checkSize() {
		var obj = document.getElementById("content");
		var img = null;  
		img = document.getElementById("test"); 
		//document.body.insertAdjacentElement("beforeend",img); 
		//img.style.visibility="hidden";   
		img.src = obj.value; alert(img.src);
		var imgwidth = img.offsetWidth;  
		var imgheight = img.offsetHeight;
		alert(imgwidth + ":" + imgheight);  
	}
	
</script>

<body>

<form>

	<input type="file" id="content" name="content" onchange="checkSize()" />
    <img id="test" name="test" src="" />
	<input type="button" id="btn" name="btn" value="检测图标大小" onclick="checkSize();" />
</form>

</body>
</html>

通过表单异步提交方式代码如下：

html代码如下，增加file域的onchange事件：

<input type="file" id="logocontent" name="logocontent" onchange="checkLogo(false);" />

js代码如下，需要引入jquery基础包、jquery easyui包、jquery.json包：

/*
	* 检测图标大小是否是18*18，将图标通过异步方式上传到服务端进行判断
	* 符合要求返回true，不符合返回false
	* @param isSubmit 是否需要提交表单，true需要，false不需要
	*/
function checkLogo(isSubmit) {
		$("#editForm").form("submit", {
			url: "后台url地址",
			success: function(data) {
				var ret = $.parseJSON(data);// 返回是json格式字符串，格式化成json对象
				checkFlag = ret.isLogoSizeOk; //验证成功isLogoSizeOk值为true，不成功为false
				if (checkFlag == false) {
					alert(ret.msg);
				} else {
					if (isSubmit) {
						formSubmit();
					}
				}
				
			}
		});
}

服务端java代码如下：

/**
	 * 判断图标是否符合指定的大小尺寸，width和height由页面传过来
	 * 符合返回true，不符合返回false
	 * 返回值为json对象字符串，key为isLogoSizeOk
	 * @param file
	 * @param request
	 * @param response
	 */
	@RequestMapping(value = "/checkLogoSize")
	public void checkLogoSize(@RequestParam("logocontent") MultipartFile[] file, HttpServletRequest request,
			HttpServletResponse response) {
		
		JSONObject retJSON = new JSONObject();
		String checkHeight = StringHelper.checkNull(request.getParameter("checkHeight"), Constant.APP_LOGO_HEIGHT);
		String checkWidth = StringHelper.checkNull(request.getParameter("checkWidth"), Constant.APP_LOGO_WIDTH);
		boolean isLogoSizeOk = true;
		String msg = "";
		if (file != null
				& file.length > 0) {
			MultipartFile logoFile = file[0];
			InputStream logoIn = null;
			try {
				logoIn = logoFile.getInputStream();
				BufferedImage bufferImage = ImageIO.read(logoIn);
				if (bufferImage != null) {
					if (!String.valueOf(bufferImage.getWidth()).equals(checkWidth)
							|| !String.valueOf(bufferImage.getHeight()).equals(checkHeight)) {
						isLogoSizeOk = false;
						msg = "请上传" + checkWidth + "*" + checkHeight + "规格的图标!";
			        }
				} else {
					isLogoSizeOk = false;
					msg = "请上传格式为jpg、png、gif等正确格式的图标!";
				}
		        
			} catch (IOException e) {
				e.printStackTrace();
			} finally {
				if (logoIn != null) {
					try {
						logoIn.close();
					} catch (IOException e) {
						e.printStackTrace();
					}
				}
			}
		}
		
		retJSON.put("isLogoSizeOk", isLogoSizeOk);
		retJSON.put("msg", msg);
		
		try {
			response.setContentType(Constant.CONTENT_TYPE);
			response.setCharacterEncoding(Constant.CHARTSET_UTF8);
			response.getWriter().write(retJSON.toJSONString());
		} catch (Exception e) {
			log.error(ExceptionUtils.getStackTrace(e));
		}
		
	}