spring mvc ajaxfileupload上传文件

使用ajaxfileupload.js列子
异步提交，无刷新上传，感觉还不错。如果再进行优化加上进度条更好了。我使用的是spring mvc
jsp页面

<script type="text/javascript">
function ajaxFileUpload()
{
	$.ajaxFileUpload
	({
			url:basePath+'/manager/app/upload.json',
			secureuri:false,
			fileElementId:'fileToUpload',
			dataType: 'json',
			success: function (data, status)
			{
				$("#img").attr("src", '${pageContext.request.contextPath}'+data.message);
			},
			error: function (data, status, e)
			{
				alert(data.status);
				alert(data.message+" error:  "+e);
			}
			
		}
	)
	return false;
}

</script>
<td>
				<img id="img"  alt=""  height="90" width="120" src="${pageContext.request.contextPath}/images/default.jpg"/>	
				<input type="file" name="fileToUpload" id="fileToUpload"/>
				<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>
			</td>

后端代码

@ResponseBody
@RequestMapping("upload")
public JsonResult upload(HttpServletRequest request)
	{
		HttpSession session = request.getSession();
		WebUserContext context = WebUserContext.get(session);
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
		String pathDir = "/files/" + context.getUserId()+"/";
	       /**得到图片保存目录的真实路径**/    
		String logoRealPathDir = request.getSession().getServletContext().getRealPath(pathDir);   
		/**根据真实路径创建目录**/    
		File logoSaveFile = new File(logoRealPathDir);     
		if(!logoSaveFile.exists())     
			logoSaveFile.mkdirs();           
		 /**页面控件的文件流**/    
		MultipartFile multipartFile = multipartRequest.getFile("fileToUpload"); 
		/**获取文件的后缀**/    
		System.out.println(multipartFile.getOriginalFilename());
		String suffix = multipartFile.getOriginalFilename().substring  
		(multipartFile.getOriginalFilename().lastIndexOf(".")); 
		
		 /**拼成完整的文件保存路径加文件**/    
		String name = +  System.currentTimeMillis()+suffix;
		String fileName = logoRealPathDir + File.separator+name;    
		File file = new File(fileName); 
		
		String data = file.getPath();
		try {
			multipartFile.transferTo(file);
		} catch (IllegalStateException e) {
			e.printStackTrace();
			JsonResult.error("-1");
		} catch (IOException e) {
			e.printStackTrace();
			JsonResult.error("-1");
		} 
		System.out.println(pathDir+name);
		return JsonResult.ok(pathDir+name);//直接返回string 也可以
	}

使用的时候注意几点
1.使用的时候如果选择数据类型是json 的改下ajaxfileload.js 的
uploadHttpData方法，因为他默认给多出<pre>烦人的标签。

 if ( type == "json" )
        	data = r.responseText;
        	 var start = data.indexOf(">");
        	 if(start != -1) {
        		 var end = data.indexOf("<", start + 1);
        		 if(end != -1) {
        			 data = data.substring(start + 1, end);
        		 }
        	 }
        	eval( "data = " + data );

2.上传完成后注意路径，正确路径才能显示出来。
3.img添加一个属性
$("#img").attr（src,"上传的图片路径"）
3.针对jquery.js1.6以下有的版本，具体版本不记得了，反正出现了不支持haddererror,所以还是得加一个函数，在国外网站上看到的，具体地址忘记了，代码如下，添加到ajaxfileupload.js

 handleError:function( s, xhr, status, e ) {
	    if ( s.error ) {
	        s.error.call( s.context || window, xhr, status, e );
	    }
	    if ( s.global ) {
	        (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
	    }
	}
 

评论

1 楼 org_zhanghua 2014-04-18  

为什么我这边上传成功后，提示下载json
请指导一下：
http://www.oschina.net/question/107380_151555