Struts2+jquery.form.js实现图片与文件上传的方法
本文实例讲述了Struts2+jquery.form.js实现图片与文件上传的方法。分享给大家供大家参考，具体如下：
jquery.form.js是jQuery的一个官方用语支持异步上传文件的插件。官方网站：http://plugins.jquery.com/form/
结合Struts2三步轻松实现文件上传
一般是针对一个页面可能不止一个Form表单，所以在一个面提交表单会影响到另一个表单，为此，图片上传表单就可以使用无刷新提交方式上传，也就是异步上传，这时jquery.from.js就派上用场了。
一、HTML
导入本jS到页面、写好上传表单
<scripttype="text/javascript"src="/js/jquery.form.js"></script> <!—图片上传--> <s:formid="picForm"name="picForm"action="/notice/showAddNotice.action"method="post" enctype="multipart/form-data"> <inputtype="file"name="pic"size="30"/><inputtype="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(){
//表单输入较验
vartitle=$("#title");
//获取textarea的内容
varcontent=tinyMCE.get('content').getContent();
varmsg="";
if($.trim(title.val())==""){
msg="公告标题不能为空！";
title.focus();
}elseif($.trim(content)==""){
msg="内容不能为空！";
}
msg="";
if(msg!=""){
alert(msg);
}else{
//表单提交
$("#noticeForm").submit();
}
});
三、Struts2Action
publicclassuploadPicAjaxextendsAbstractAjaxAction{
privatestaticfinallongserialVersionUID=-4742151106080093662L;
/**Struts2文件上传的三个属性*/
privateFilepic;
privateStringpicFileName;
privateStringpicContentType;
@Override
protectedStringgetJson()throwsException{
//获取项目部署的路径
StringrealPath=ServletActionContext.getServletContext()
.getRealPath("/images/notice");
//生成新的文件名
StringnewFileName=UUID.randomUUID().toString()+"."
+FilenameUtils.getExtension(picFileName);//获取文件的后缀名aa.jpg-->jpg
FileUtils.copyFile(pic,newFile(realPath+File.separator+newFileName));
return"/images/notice/"+newFileName;
}
/**setterandgettermethod**/
......
}
四、配置Struts2.xml
<!--图片的异步上传--> <actionname="uploadPic"class="com.wise.hrm.action.notice.uploadPicAjax"> </action>
好了，从页面到后台就已经写完了。这样就可以上传了。完毕！
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。