解决使用ajaxFileUpload上传控件出现的问题:回调函数总是进入error或success

learningever 2015-08-07

上周说到做excel的导入时,用到了jquery的一个上传控件ajaxFileUpload,但今天测试的时候,却出现了问题:

我们不妨先来查看一下ajaxFileUpload的基本语法:

$.ajaxFileUpload  
    ({  
            url:xxx,  
            secureuri:false,  //上传处理地址
            fileElementId:'fileToUpload',  //上传文件的id
            dataType: 'json',  //传输的数据类型,默认为text
           //成功响应后回调的函数  data为后台返回的数据 status为成功或失败状态
            success: function (data, status)  
            {  
               //some code
            }, 
            //响应失败后回调的函数  e为错误信息
            error: function (data, status, e)  
            {  
              //some  code
            }  
              
        }  
    )

结果我发现,是无论后台响应是否成功,它都是进入回调函数error:

而我本地写的上传的js如下:

$.ajaxFileUpload({
	url : "demo/import.json",
	//dataType : 'json',
	secureuri : false,
	fileElementId : 'file',
	success : function(res, status) {
               //some code
	},
	error : function(data, status, e) {
               //some code
	}
   }
);

 后来发现,我竟然把dataType注掉了。。,并且无论后台是否响应成功,都进的是error回调……因此我把dataType指定为json,

而检查我的后台,发现

我用的google浏览器,debug才发现demo/import.json所对应的后台代码:

@RequestMapping("/demo/import.json")
	@ResponseBody
	public String import(@RequestParam(value = "excelFile") MultipartFile excelFile, 
			HttpServletRequest request) {
		String fileName = excelFile.getOriginalFilename();
		String result = "";
		try{
			//some code
			result = "success";
		} catch(Exception e) {
			e.printStackTrace();
			result = "fail";
		}
		return result;
	}

返回的是String,该String并不是json格式的。改之:

@RequestMapping("/demo/import.json")
	@ResponseBody
	public String import(@RequestParam(value = "excelFile") MultipartFile excelFile, 
			HttpServletRequest request) {
		String fileName = excelFile.getOriginalFilename();
		String result = "";
                Map map = new HashMap();
               String jsonStr = null;
		try{
			//some code
			result = "success";
		} catch(Exception e) {
			e.printStackTrace();
			result = "fail";
                      
		}
                map.put("data", result);
                jsonStr = String.valueOf(JSONObject.fromObject(map));
		return jsonStr;
	}

而之前前台没指定dataType,因为传输的数据类型对应不上,所以无论成功与否都会进入error。

同样模拟测试后台响应成功和响应失败,问题依然出现。。

看到网上说的,可能是ajaxfileupload.js版本的问题,即里面判断返回数据类型的js函数:

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" )
        	eval("data = "+data);
        // evaluate scripts within html
        if ( type == "html" )
            jQuery("<div>").html(data).evalScripts();
			//alert($('param', data).each(function(){alert($(this).attr('value'));}));
        return data;
    }

 这个js函数表明,当type为json时,直接把回调函数参数里的data指定为后台给你返回的data,但通过google浏览器debug这个方法才发现即使后台返回值类型改成json格式的String,并指定前台dataType属性为json时,获取到的data为<pre style="word-wrap: break-word; white-space: pre-wrap;">{"data":"success"}</pre>他并不是从后台获取到纯json格式的字符串,改正:

if ( type == "json" )
        	eval("data = "+$(data).html());

 清除浏览器缓存,重测,即可得到中间的json 串{"data":"success"}。

这样,无论后台响应成功与否,它不会只进入error了。

但现在问题又来了,虽然不会只进入error但是问题又来了。。无论是否响应成功,它又只进入success回调了,感觉很无语。

同样,通过debug,发现前台回调时,即使后台响应失败,也会给前台返回一个json {”data:“ "fail"},只要有json,他就会进入success。虽说我可以通过在success里取data对应的值,根据data对应的值是success还是fail判断到底是成功响应还是失败响应,但终归不太合理。仔细检查后台代码后,改之:

@RequestMapping("/demo/import.json")
	@ResponseBody
	public String import(@RequestParam(value = "excelFile") MultipartFile excelFile, 
			HttpServletRequest request) {
		
		Map map = new HashMap();
		String jsonStr = null;
		try{
			//some code
			result = "success";
			map.put("data", result);
			jsonStr = String.valueOf(JSONObject.fromObject(map)); //只有响应成功才会得到json格式的字符串——前台进入success回调
		} catch(Exception e) {
			e.printStackTrace();
			result = "fail";
			//map.put("data", result); //如果响应失败,则不会生成json格式的字符串,返回的就只是一个空的String而已——前台进入error回调
		}
		return jsonStr;
	}

 再次模拟成功和失败响应之后,终于”各找各妈“了——成功响应的进入success回调,响应失败的进入error回调。。

小结:如果是传输类型是json格式,如果后台返回的不是json格式的字符串,则前台只会进error回调;如果后台返回的是json格式的字符串,但如果响应失败也给他返回一个json字符串时,前台也会进入success回调。

推荐一个相对稳定的ajaxFileUpload.js版本下载(见附件):

 

相关推荐