利用Jquery的AjaxUpload组件实现头像异步上传并回显

练习中遇到头像上传不能实时显示的问题，利用ajaxUpload异步文件上传解决。

1、导入jquery-1.10.2.min.js、ajaxupload.3.6.js包。

附ajaxupload.3.6.js下载地址：http://download.csdn.net/detail/dengchenlu/3957758

2、jsp中导入包

    <script type="text/javascript" src="${basePath }js/jquery/ajaxupload.3.6.js"></script>

2、jsp中的配置

js：

	//利用AjaxUpload组件实现异步上传头像并回显
    	$(document).ready(function(){
 	  		var button = $("#imgButton");
 	  		new AjaxUpload(button,{
 	  			action:"${basePath}nsfw/user_ajaxUpload.action",
 	  			name:"headImg",//同Action中File文件名，""不能少
 	  			onSubmit: function(file, ext) {  
		            if (!(ext && /^(jpg|JPG|png|PNG|gif|GIF)$/.test(ext))) {  
	               		alert("您上传的图片格式不对，请重新选择！");  
	              		return false;  
           		 	}  
        		}, 
        		onComplete:function(file,response){//默认全成功，不再判断，直接设置img的src
        			var path = "${basePath}upload/";
        			
        			var reg = /<pre.+?>(.+)<\/pre>/g;  
				var result = response.match(reg);  
				response = RegExp.$1;//以上三行是为了去除response返回的pre标签内容
					
        			$("#headImg").attr("src",path+response);
        			
        			//由于已经异步设置了头像路径，注册时不再需要重新设置，因此直接隐藏域保存headImg属性
        			$("#imgHidden").val(response);
        		}
 	  		});
    	});

html：

	<td class="tdBg" width="200px">头像：</td>
            <td>
            	<img id="headImg" src="${basePath }upload/<s:property value='user.headImg'/>" width="100" height="100"/>
		           	<input id="imgButton" type="button" name="headImg" value="上传头像" class="btn32"/>
 					<s:hidden name="user.headImg" id="imgHidden"/>
            </td>

Action中的接受配置：

//异步显示头像
	public void ajaxUpload(){
		try {
			//处理用户头像
			if(headImg != null){
				String filePath = ServletActionContext.getServletContext().getRealPath("upload/user");//保存路径
				//保存文件名 uuid+后缀
				String fileName = UUID.randomUUID().toString().replace("-", "")+headImgFileName.substring(headImgFileName.lastIndexOf('.'));
				FileUtils.copyFile(headImg,new File(filePath,fileName));
				String headImg = "user/"+fileName;//user/开头
				
				HttpServletResponse response = ServletActionContext.getResponse();
				response.setCharacterEncoding("text/html;charset=UTF-8");
				response.setCharacterEncoding("UTF-8");
				response.getWriter().print(headImg);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

File及setter，getter

	//头像
	private File headImg;
	private String headImgFileName;
	private String headImgContentType;

最终效果：