Struts2+Ajax+Jquery的无刷新上传图片

####备注：这里不详细讲解Struts2的文件上传知识点，想了解请点击我另外一篇文章

http://blog.csdn.net/qq_25281057/article/details/52333677

###这里我引用了两个js文件，一个Jquery和一个form表单插件

<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.8.2.js"></script><script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-form.js"></script>

###因为用到Ajax时候一般要解析json，所以要另外加几个和json解析相关的jar包，我直接把这个工程所以到jar包截图出来吧。

###jsp的前端主要页面代码

<hr/><div id="main"><input id="file" type="file" name="uploadImage"/></div><!-- 显示百分比 --> <span id="percent"></span> <span class="bar"></span><!-- 显示图片名字 --><div id="filename"> </div><!-- 显示图片 --><div id="showing" > </div>

###Jquery代码

<script type="text/javascript"><!-- $(function() {            var $percent=$("#percent");//获取进度百分比   var $bar=$(".bar");//进度条   var $showing=$("#showing");//将要显示的图片div   var $filename=$("#filename");//上传文件名   var $file=$("#file");//上传的文件      //动态添加form,利用wrap函数      $("#main").wrap("<form id='myform'   method='post' enctype='multipart/form-data'></form>");   //当文件改变是触发的事件   $("#file").change(function()   {          // window.alert("ok");     var $var_option={         //写在Struts.xml中配置的对应action          url:'/Struct2Aajax/ajax3.action',          //dataTpye:'json',          //开始的上传触发的函数          beforeSend:function()              {               $showing.empty();//图片显示设置为空               $percent.show();//显示进度数               var $percentVal='0%';//初始化进度              },          //上传过程中不断触发的函数          uploadProgress:function(event,position,total,percentComplete)              {               var $percentVal=percentComplete+'%';//percentComplete:改函数返回的进程数               $percent.html($percentVal);               $bar.width(percentComplete);//设置进度条view                              },          //成功时触发的函数           success:function(data)               {               //把成功返回的字符串转成json数据；就是说要把字符串以json形式返回。               /*               例如这个项目的返回信息可以这样：               {"name":"2.png","path":"images/2.png"}                */               var $data=jQuery.parseJSON(data);                               //获取文件路径                var $img=$data.path;                //动态添加标签                $showing.html("<img src='"+$img+"'  style='width:100px;height:100px;'/>");                $percent.html("上传成功");                $file.html($data.name);               },           error:function()               {                 $percent.html("上传失败");               }         };     $("#myform").ajaxSubmit($var_option);    })    })//--></script>

###action主要代码为

private File uploadImage;//得到上传的文件private String uploadImageContentType;//得到文件的类型private String uploadImageFileName;//得到文件的名称//用来返回json字符串的private String res;//下面节省了set和get方法，记得自行添加。public String postPhoto() throws Exception {            Map<String, String> photoData=new HashMap<String, String>();      /*         * ServletActionContext.getServletContext().getRealPath("/")         * 是当前【程序】在磁盘中的位置，         * 如：D:\apache-tomcat-7.0.6\webapps\SchoolWeb         */    //把文件保存到服务器的路径    String realpath = ServletActionContext.getServletContext().getRealPath("/images/" );    File file = new File(realpath);        // 没有此文件夹就创建    if (!file.exists())file.mkdirs();      try {        FileUtils.copyFile(uploadImage, new File(file, uploadImageFileName));        photoData.put("name",uploadImageFileName);        photoData.put("path","images"+"/"+uploadImageFileName);                // 将要返回的map对象进行json处理        JSONObject jo = JSONObject.fromObject(photoData);        // 调用json对象的toString方法转换为字符串然后赋值给result        this.res = jo.toString();        //返回字符串        HttpServletResponse response=ServletActionContext.getResponse();            response.setContentType("text/html;charset=utf-8");        PrintWriter pw=response.getWriter();        pw.write(this.res);        pw.flush();        pw.close();      } catch (IOException e) {                e.printStackTrace();      }        //记得这里返回null，留意下面Struts.xml文件的怎么配置          return null;  }

###Struts.xml文件的配置，因为没有页面间的转向，所以result标签不用写，同时包要继承json-default

<package name="test" extends="json-default" namespace="/"><action name="ajax3" class="com.struct2.action.PostPhotoAction" method="postPhoto"></action></package>

###效果图