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>

###效果图