ajaxfileupload上传例子

一 引入ajaxfileupload.js,ajaxfileupload.css,jquery.js
2 jsp上传页面部分代码
 

 <td class="td2">
	                  	<div>
	                  		<c:choose>
	                  			<c:when test="${member.photo == null}">
	                  				<img src="${imgHuadoo}/front/images/Red/userRed/user_img.gif}" width="113" id="user_photo" height="132" />
	                  			</c:when>
	                  			<c:otherwise>
	                  				<img src="${photoUrl}/${member.photo}" width="113" id="user_photo" height="132" />
	                  			</c:otherwise>
	                  		</c:choose>
	                  		
	                  	</div>
	                  	<a href="#" style=" color:#ff0094;" 
	                  		onclick="javascript:document.getElementById('uploadPhotoForm').style.display='';">
	                  	    更换一个兔子形象
	                  	</a>
	                  	<div id="uploadPhotoForm" style="display:none">
	                  		<img id="loading" src="${imgHuadoo}/front/images/loading.gif" style="display:none;">
							<form name="form" action="" method="POST" enctype="multipart/form-data">
								<table cellpadding="0" cellspacing="0" class="tableForm">					
								<thead>
									<tr>
										<th>请选择您要上传的头像!</th>
									</tr>
								</thead>
								<tbody>	
									<tr>
									<td>
										<div id="inputF"><input id="fileToUpload" type="file" size="24" name="fileToUpload" class="input"/></div>
									</td></tr>
								</tbody>
									<tfoot>
										<tr>
											<td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">上传</button></td>
										</tr>
									</tfoot>
							
								</table>
							</form> 
							<script type="text/javascript" language="javascript">
							function ajaxFileUpload()
							{
								var rqUrl = "user/modifyUser.do?method=uploadPhoto";
								var t2= "front/user/usercenter/uploadPhoto.jsp";
								$("#loading")
								.ajaxStart(function(){
									$(this).show();
								})
								.ajaxComplete(function(){
									$(this).hide();
								});
						
								$.ajaxFileUpload(
	{
	url:'${ctx}/front/user/usercenter/uploadPhoto.jsp',
	secureuri:false,
	fileElementId:'fileToUpload',
	dataType: 'json',
	success: function (data, status)
	{
	if(typeof(data.error) != 'undefined')
	{
         if(data.error != '')
	{
	alert(data.error);}else{					alert(data.msg);
	}
	}
	alert(data.msg);//返回成功提示
         $("#uploadPhotoForm").hide();
	document.getElementById("user_photo").src="${photoUrl}/" + data.newPhoto;
	//alert(data.msg + "++++ " + data.error + "--" + status + data.newPhoto
	//+ "\nimgSrc:" + document.getElementById("user_photo").src);
	$("#inputF").html("<input id='fileToUpload' type='file'' size='24' name='fileToUpload' class='input'\/>");
	},
	error: function (data, status, e)
	{alert(e);}
	}
								)								return false;
			</script>
	                  	</div>
	                  </td>
  

upload.jsp请求处理页面代码:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="com.jspsmart.*, com.jspsmart.upload.*" %>
<%@page import="org.huadoo.model.Member, org.huadoo.manager.MemberManager" %>
<%@page import="org.springframework.web.context.support.WebApplicationContextUtils" %>
<%@page import="java.io.*" %>
<%@page import="org.huadoo.core.utils.HuadooConfigure" %>
<%@page import="org.springframework.context.ApplicationContext"%>
<%@page import="org.huadoo.core.utils.HuadooUtils" %>

   <%
   
	Member member = (Member)request.getSession().getAttribute("member");
	request.setCharacterEncoding("utf-8");
	response.setCharacterEncoding("utf-8");
	if(member == null) {
		out.println("{error:'请登陆后再尝试上传头像!'}");
		return;
	}
	ApplicationContext ctx = WebApplicationContextUtils.getRequiredWebApplicationContext(
			getServletContext());
	MemberManager memberManager = (MemberManager)ctx.getBean("memberManager");  
	HuadooConfigure configure = (HuadooConfigure)ctx.getBean("configure");  
   	try {
   		String path = HuadooUtils.getUserPhotoUrl(configure.getUserlogPath(), member);
   		java.io.File dir = new java.io.File(path);
   		System.out.println("保存地址:" + path);
   		if(!dir.exists())
   			dir.mkdirs();
		SmartUpload su = new SmartUpload();	
		su.setCharset("UTF-8");
		su.setMaxFileSize(3 * 1024 * 1024);			
		//su.initialize(request.);
		su.initialize(pageContext);
		su.upload();			
		Files files = su.getFiles();
		for(int i = 0; i < files.getCount(); i++) {
			com.jspsmart.upload.File f = files.getFile(i);
			if(f.isMissing())
				continue;
			String fileName = (System.currentTimeMillis() + "").substring(0, 10) + "." +  f.getFileExt();
			
		
			
			f.saveAs(path + "/" + fileName);
			String photo = member.getPhoto();
			if(photo != null) {
				java.io.File _f = new java.io.File(path + "/" + photo);
				if(_f.exists())
					_f.delete();
			}
			member.setPhoto(fileName);
			memberManager.saveOrUpdate(member);
			request.getSession().setAttribute("member", member);
			out.println("{msg:'恭喜您,头像上传成功!', newPhoto:'" + member.getPhoto() + "'}");
			return ;
		}
		
	} catch (ServletException e) {
		e.printStackTrace();
	} catch (IOException e) {
		e.printStackTrace();
	} catch (SmartUploadException e) {
		e.printStackTrace();
	}
	try {
		out.println("{error:'用户照片上传失败!'");
	} catch (IOException e) {
		e.printStackTrace();
	}
   %>