浏览 3412 次
|
锁定老帖子 主题：使用ajax异步回调实现服务端图片上传验证
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-10-23
最后修改：2011-10-23
最近开发一个项目，提交表单时，具有上传图片文件的功能。上传图片可以使用当前流行的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){
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等。 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2011-10-24
做得像58同城发布租房信息时候上传图片那个效果吗？多图上传
|
| 返回顶楼 | |
|
发表时间：2011-10-24
explanation009 写道 做得像58同城发布租房信息时候上传图片那个效果吗？多图上传
没看过58同城的，可以是多图片上传，按这个方法，理论上多少张图片都可以，只要容器允许。 基本思想就是form表单提交，服务端得到form表单域的参数后，将文件路径实例化为File或者类似File的FileItem等实例，然后判断，最后用ajax的回调函数返回前端 |
| 返回顶楼 | |
