Struts2+jquery.form.js实现图片与文件上传的方法
内容摘要
本文实例讲述了Struts2+jquery.form.js实现图片与文件上传的方法。分享给大家供大家参考,具体如下:
jquery.form.js是jQuery的一个官方用语支持异步上传文件的插件。官方网站:h
jquery.form.js是jQuery的一个官方用语支持异步上传文件的插件。官方网站:h
文章正文
本文实例讲述了Struts2+jquery.form.js实现图片与文件上传的方法。分享给大家供大家参考,具体如下:
jquery.form.js是jQuery的一个官方用语支持异步上传文件的插件。官方网站:http://plugins.jquery.com/form/
结合Struts2三步轻松实现文件上传
一般是针对一个页面可能不止一个Form表单,所以在一个面提交表单会影响到另一个表单,为此,图片上传表单就可以使用无刷新提交方式上传,也就是异步上传,这时jquery.from.js就派上用场了。
一、HTML
导入本jS到页面、写好上传表单
1 2 3 4 5 6 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | // 为表单绑定异步上传的事件 $( 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(); } }); |
三、Struts2Action
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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
1 2 3 | <!-- 图片的异步上传 --> <action name= "uploadPic" class = "com.wise.hrm.action.notice.uploadPicAjax" > </action> |
好了,从页面到后台就已经写完了。这样就可以上传了。完毕!
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
代码注释