需求描述:要做图标上传,限制大小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" οnchange="checkSize()" />
<img id="test" name="test" src="" />
<input type="button" id="btn" name="btn" value="检测图标大小" οnclick="checkSize();" />
</form>
</body>
</html>
通过表单异步提交方式代码如下:
html代码如下,增加file域的onchange事件:
<input type="file" id="logocontent" name="logocontent" οnchange="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));
}
}