本文详解如何利用Struts2框架配合jquery.form.js插件实现图片与文件的异步上传。通过HTML表单配置、JS中ajaxForm方法绑定及Action处理，完成无刷新提交，避免多表单冲突。
Struts2结合jquery.form.js实现异步文件上传
本文介绍一种基于Struts2框架与jquery.form.js插件实现图片和文件异步上传的具体方案，供开发者参考。
jquery.form.js是jQuery官方提供的用于支持文件异步上传的插件，其官方网站为：http://plugins.jquery.com/form/。
通过结合Struts2，仅需三步即可轻松完成文件上传功能的开发。
当页面中存在多个Form表单时，直接提交可能会相互干扰。因此，图片上传部分可采用无刷新的异步提交方式，此时jquery.form.js插件便发挥了关键作用。
一、HTML部分
在页面中引入该JS库，并编写用于上传的表单结构。
<script type="text/javascript" src="/js/jquery.form.js"></script>
<!—图片上传 -->
<s:form id="picForm" name="picForm" action="/notice/showAddNotice.action" method="post"
enctype="multipart/form-data">
<input type="file" name="pic" size="30"/><input type="submit" value="上传"/>
</s:form>
二、JS部分
// 为表单绑定异步上传的事件
$(function(){
// 为表单绑定异步上传的事件
$("#picForm").ajaxForm({
url : "${pageContext.request.contextPath}/notice/uploadPic.action", // 请求的url
type : "post", // 请求方式
dataType : "text", // 响应的数据类型
async :true, // 异步
success : function(imageUrl){
//alert(imageUrl);
},
error : function(){
alert("数据加载失败！");
}
});
// 为提交按钮绑定事件
$("#saveBtn").click(function(){
// 表单输入较验
var title = $("#title");
// 获取textarea的内容
var content = tinyMCE.get('content').getContent();
var msg = "";
if ($.trim(title.val()) == ""){
msg = "公告标题不能为空！";
title.focus();
}else if ($.trim(content) == ""){
msg = "内容不能为空！";
}
msg = "";
if (msg != ""){
alert(msg);
}else{
// 表单提交
$("#noticeForm").submit();
}
});
三、Struts2 Action处理
public class uploadPicAjax extends AbstractAjaxAction {
private static final long serialVersionUID = -4742151106080093662L;
/** Struts2文件上传的三个属性 */
private File pic;
private String picFileName;
private String picContentType;
@Override
protected String getJson() throws Exception {
//获取项目部署的路径
String realPath = ServletActionContext.getServletContext()
.getRealPath("/images/notice");
//生成新的文件名
String newFileName = UUID.randomUUID().toString()+"."
+FilenameUtils.getExtension(picFileName);// 获取文件的后缀名 aa.jpg --> jpg
FileUtils.copyFile(pic, new File(realPath + File.separator + newFileName));
return "/images/notice/" + newFileName;
}
/** setter and getter method **/
......
}
四、配置Struts2.xml文件
<!-- 图片的异步上传 -->
<action name="uploadPic" class="com.wise.hrm.action.notice.uploadPicAjax">
</action>
至此，从前端页面到后端逻辑的代码编写已全部完成，即可实现上传功能。
如需了解更多jQuery相关内容，可参考本站专题：《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》。
希望本文的阐述能对大家的jQuery程序设计工作有所帮助。