通过Struts2、Ajax异步上传图片

1、下载JS插件jquery-1.4.2.min.js和jquery.form.js

2、HTML中的form表单如下:

<script type="text/javascript" src=\'#\'" /jquery-1.4.2.min.js"></script>//引入插件
<script type="text/javascript" src=\'#\'" /jquery.form.js"></script>

<form id="form2" method="post" enctype="multipart/form-data">  <input id="fileupload" name="fileMaterial" type="file" />  <div id="message"></div>    <input type="button" class="right-button02" value="上传" /> </form>   图片预览 <div id="showImage"></div>  3、在页面的js中写上如下代码: 
function uploadImage() { 	$(document).ready( 					function() { 						var options = { 							url : "<%=path%>/material.action!ajaxGetImage.do",//跳转到相应的Action 							type : "POST",//提交方式 							dataType : "script",//数据类型 							success : function(msg) {//调用Action后返回过来的数据 								alert(msg); 								if (msg.indexOf("#") > 0) { 									var data = msg.split("#"); 									var data = msg.split("#");                                                                         $("#message").html("<font color='red'>"+data[0]+data[2]+"</font>");                                                                         $("#showImage").html("<img src=\'#\'" />"); 								} else { 									$("#message").html(msg);//在相应的位置显示信息 								} 							} 						}; 						$("#form2").ajaxSubmit(options);//绑定页面中form表单的id 						return false; 					}); } </script>
$(document).ready()表示在直接加载  4、传到相应的Action,uploadFile.action public class MaterialAction extends BasicAction{        private File fileMaterial;//Ajax获取图片文件,与控件type=File中的name属性一样        private String fileMaterialFileName;//Ajax获取图片文件名称,相应的name属性名称+FileName        -----------相应的get和set方法----------------           /**      * 通过Ajax获取图片信息      * @return      * @throws IOException       */     public String ajaxGetImage() throws IOException{         HttpServletResponse response=ServletActionContext.getResponse();         response.setContentType("text/plain");         response.setCharacterEncoding("utf-8");         if(fileMaterial!=null){             String fileName=UUID.randomUUID()+"."+getFileType(fileMaterialFileName);             String savePath=ServletActionContext.getServletContext().getRealPath("cookBookImage")+"/material/"+fileName;             ImageZipUtil.zipWidthHeightImageFile(fileMaterial, new File(savePath), 40, 40, 1.0f);//压缩图片上传的公共类             String imgUrl="cookBookImage/material/"+fileName;             response.getWriter().print("图片#"+imgUrl+"#上传成功!");//把相应的地址放到前台解析,通过#符号分割         }else{             response.getWriter().print("图片上传失败!");         }         return null;     } 
  
  通过以上的方式,我们就可以通过页面无刷新,在Struts2中无需要进行页面跳转来进行图片上传!



你可能感兴趣的:(Ajax,String,function,struts,File,action)