spring mvc 文件、图片上传（极简）ajaxFileUpload 出现 syntax error 的错误

先上原文

感谢原作者

主体部分如下：

地址：http://blog.csdn.net/huobing123456789/article/details/50750063

没想到做个图片上传耽误这么长时间，特此整理。

基于springMVC后端框架。

前端使用jQuery插件ajaxFileUpload.js。

参考文章：spring mvc(注解)上传文件的简单例子

只提供核心代码，格式过滤，存储目录，回显和样式等自己加代码实现。html/jsp代码片段

引入文件ajaxfileupload.js

[html]  view plain  copy

  print ?

1. <script type="text/javascript" src="/js/lib/ajaxfileupload.js"></script>  

功能部分代码（通过调样式达到自己想要的效果）

[html]  view plain  copy

  print ?

1. <div class="wl-box">  
2.    <input type="file" id="uploadFile" name="file" onchange="ajaxFileUpload()" />  
3. </div>  

js代码，注意enctype:'multipart/form-data',//注意一定要有该参数

[javascript]  view plain  copy

  print ?

1. function ajaxFileUpload() {  
2.     $.ajaxFileUpload({  
3.         url: webContext + '/act/uploadPic', //服务器端请求地址  
4.         secureuri: false, //是否需要安全协议，一般设置为false  
5.         fileElementId: 'uploadFile', //文件上传域的ID  
6.         dataType: 'json', //返回值类型 一般设置为json  
7.         enctype:'multipart/form-data',//注意一定要有该参数  
8.         success: function (data, status)  //服务器成功响应处理函数  
9.         {  
10.             alert(data);       //data是从服务器返回来的值  
11.             alert('上传图片成功!图片地址'+webContext + "/upload/"+data);  
12.             $("#imghead").attr("src", webContext + "/upload/"+data);  
13.         },  
14.         error: function (data, status, e)//服务器响应失败处理函数  
15.         {  
16.             alert(e);  
17.         }  
18.     })  
19. }  

后端Java代码

[java]  view plain  copy

  print ?

1. @RequestMapping("/uploadPic")  
2. @ResponseBody  
3. public String uploadPic(@RequestParam(value = "file", required = false) MultipartFile file,HttpServletRequest request) throws Exception {  
4.     String path = request.getSession().getServletContext().getRealPath("upload");  
5.     String fileName = file.getOriginalFilename();  
6.     String fileNameStr = (new Date().getTime())+"__"+fileName;  
7.     File targetFile = new File(path, fileNameStr);  
8.     if(!targetFile.exists()){  
9.         targetFile.mkdirs();  
10.     }  
11.     //保存  
12.     try {  
13.         file.transferTo(targetFile);  
14.     } catch (Exception e) {  
15.         e.printStackTrace();  
16.     }  
17.     return fileNameStr;  
18. }  

出现此错误

更改ajaxfileupoad.js 中 uploadHttpData: function( r, type )中        if ( type == "json" ){eval( "data = " + data );} 部分中eval( "data = " + data )改为data=r.responseText;解决。返回文件名。地址另处理。

照楼上做完之后，出现syntax error 错误

本人架构 spring mvc+mybatis+maven 

问题解决我的修改部分：

一、 ajaxfileupoad.js文件 uploadHttpData: function( r, type )中        if ( type == "json" ){eval( "data = " + data );} 部分中eval( "data = " + data )改为data=r.responseText;解决。返回文件名。地址另处理。alert()自己去

uploadHttpData: function( r, type ) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        // If the type is "script", eval it in global context
        if ( type == "script" )
            jQuery.globalEval( data );
        // Get the JavaScript object, if JSON is used.
        if ( type == "json" ){
        	alert("------"+r.responseText);   
        	data=r.responseText;
        	}
        // evaluate scripts within html
        if ( type == "html" )
            jQuery("<div>").html(data).evalScripts();

        return data;
    }

注：虽然解决了图片的上传返回和显示，但是仅仅返回文件名是不够的。原文作者Controller部分返回的是String ，我更改为json 返回，并也同时修改了此部分，但无法解决IE浏览器返回JSON下载的问题。最终方案还是改了回去。

二、前台jsp界面部分：

<script type="text/javascript">
    function ajaxFileUpload() {
        $.ajaxFileUpload({
            url:'manage/uploadImage.do', //服务器端请求地址
            secureuri: false, //是否需要安全协议，一般设置为false
            fileElementId: 'uploadFile', //文件上传域的ID
            dataType: 'json', //返回值类型 一般设置为json
            enctype:'multipart/form-data',//注意一定要有该参数
            success: function (data, status)  //服务器成功响应处理函数
            {
            	data = JSON.parse(data);//手动解析
            	
            	alert('---data.id-' + data.id);
                alert('上传图片成功!图片地址' + "/uploadFile/"+data.status);
                $("#imghead").attr("src", "/uploadFile/"+data.data);
            },
            error: function (data, status, e)//服务器响应失败处理函数
            {
            	alert(data);
                alert(e);
            }
        })
    }
    </script>

三、 Controller部分

@Controller
@RequestMapping("/manage")
public class FileUploadController {
	
	@RequestMapping(value ="/uploadImage.do")
	public void uploadImage(@RequestParam(value = "uploadFile", required = false) MultipartFile uploadFile,
			HttpServletRequest request,HttpServletResponse response) throws Exception {
	      Map<String, Object> ordersMap = new HashMap<String, Object>();
		System.out.println("FileUploadController-------upload--------in ");
		 String path = request.getSession().getServletContext().getRealPath("../uploadFile");
		 System.out.println("FileUploadController-------upload--------path="+path);
		  String fileName = uploadFile.getOriginalFilename();
			 System.out.println("FileUploadController-------upload--------fileName="+fileName);
			 String suffixStr=this.getPicSuffix(fileName);
		    String fileNameStr = (new Date().getTime())+"."+suffixStr;
			 System.out.println("FileUploadController-------upload--------fileNameStr="+fileNameStr);
		    File targetFile = new File(path, fileNameStr);
		    
		    if(!targetFile.exists()){
		        targetFile.mkdirs();
		    }
		    //保存
		    try {
		    	uploadFile.transferTo(targetFile);
		    } catch (Exception e) {
		        e.printStackTrace();
		    }
			 System.out.println("FileUploadController-------upload--------fileNameStr="+fileNameStr);
	    	  ordersMap.put("status", "sss");
	    	  ordersMap.put("data", fileNameStr);
	    	  ordersMap.put("id", 1234);
	    	  JSONObject json=new JSONObject(ordersMap); 
			System.out.println("FileUploadController-------upload--------json.toString()="+json.toString());
			response.setContentType("text/html; charset=utf-8");
			response.getWriter().write(json.toString());
	}