| 标题 | Struts2+jquery.form.js实现图片与文件上传的方法 |
| 内容 | 这篇文章主要介绍了Struts2+jquery.form.js实现图片与文件上传的方法,结合实例形式详细分析了jquery.form.js插件实现前台图片上传提交及Struts2进行后台处理的相关步骤与实现技巧,需要的朋友可以参考下 本文实例讲述了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", // 请求的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 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"> </action> 好了，从页面到后台就已经写完了。这样就可以上传了。完毕！ |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。