日期:2014-05-16  浏览次数:20627 次

使用ajax异步回调实现服务端图片上传验证
最近开发一个项目,提交表单时,具有上传图片文件的功能。上传图片可以使用当前流行的Apache Fileupload或者struts自带的文件上传功能。但是,当限制为仅能上传最大1M的图片,并且只能是jpg,gif图的时候,如何进行验证呢?前端的js显然是没有权限访问本地文件来进行验证的。经过多方研究,想到了ajax的回调函数ajax_callback。
下面是前端jsp文件的部分代码
<head>
<script type="text/javascript">
	function ajax_callback(result) {
		if(/^1:/.test(result)){
			alert(result.substr(3));
		}else{
			window.location.href=result;
		}

		return;
	} 

	function submitform(){
		var form=document.getElementById('fm');
	        form.target="check_frame";
		form.submit();
	}
</script>
</head>
<body>
<form action="uploadImg" enctype="multipart/form-data" method="post" id="fm" onsubmit="return false">
... ...
<input class="fileBtn" name="realFile1" id="realFile1" type="file"/>
... ...
<a href="javascript:void(0)" class="button" onclick="return submitform()">提交</a>
... ...
<iframe name="check_frame" style="display:none;"></iframe>
</form>
</body>

注意,在form表单的最底部,放置了一个iframe,作用是当提交表单form时执行的action的返回值可以target到隐藏的iframe

而在代码中的uploadImg服务端代码,此时需要具有返回值,我的做法是只要验证出错的代码,全都用1:开头,比如return "1:图片超过1M";等,那如果服务端方法的返回值是void怎么办呢?我使用了以下代码
	public String appendJS(String res) {
		String prefix = "<script type=\"text/javascript\" language=\"javascript\">document.domain=\"yourdomain.com\";parent.ajax_callback('";
		String suffix = "')</script>";
			
		return res == null ? prefix + suffix : prefix + res + suffix;
	}

public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
	boolean verify = false;
	... ...
	... ...

	//当文件上传上来之后,先进行文件后缀名,文件大小的服务端验证
	//如果不符合,就使用下面的代码返回到前端
	if(!verify){
	HttpServletResponse response = inv.getResponse();
	response.setContentType("text/html;charset=UTF-8");

        PrintWriter out = response.getWriter();
        String jsRes = appendJS(res);
        if(logger.isDebugEnabled())
        	logger.debug("jsRes -> " + jsRes);
        
        out.println(jsRes);
	
	return;
	}
}

经过QA详细测试,这种服务端验证的方式适合当前流行的大部分浏览器,例如FireFox,Chrome,IE等。