Struts2+jquery.form.js实现图片与文件上传的方法

本文实例讲述了Struts2+jquery.form.js实现图片与文件上传的方法。分享给大家供大家参考，具体如下：
jquery.form.js是jQuery的一个官方用语支持异步上传文件的插件。官方网站：http://plugins.jquery.com/form/
结合Struts2三步轻松实现文件上传
一般是针对一个页面可能不止一个Form表单，所以在一个面提交表单会影响到另一个表单，为此，图片上传表单就可以使用无刷新提交方式上传，也就是异步上传，这时jquery.from.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", // 请求的urltype : "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（）;}}）;

三、Struts2Action

public class uploadPicAjax extends AbstractAjaxAction {private static final long serialVersionUID = -4742151106080093662L;/** Struts2文件上传的三个属性 */private File pic;private String picFileName;private String picContentType;@Overrideprotected String getJson（） throws Exception {//获取项目部署的路径String realPath = ServletActionContext.getServletContext（）.getRealPath（"/images/notice"）;//生成新的文件名String newFileName = UUID.randomUUID（）.toString（）+"."+FilenameUtils.getExtension（picFileName）;// 获取文件的后缀名 aa.jpg --> jpgFileUtils.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程序设计有所帮助。