C#.NET+Jquery+ajaxfileupload 进行上传报SyntaxError 语法错误及请求500错误/jQuery.handleError

在利用ajaxfileupload 进行上传时，报 SyntaxError 语法错误 及请求500错误

跟踪JS 返回错误

当后台获取到前台传来的文件时(例如上传功能， 导入功能)， 返回类型为application/json， 这个时候响应到前端的JSON格式的数据格式可能是

"<pre>{\"error\":\"上传成功\",\"data\":\"1\",\"imgurl\":\"UpLoadImg/HeadImage/91b49cd9-34df-4be3-8283-8955a6e5d883.jpg\"}</pre>"

由于

uploadHttpData 里面 eval进行解析了，多了个pre所以 解析错误

    if (type == "json") {
            eval("data = " + data);
        }

解决方法：

1：

eval( "data = " + data );=》

data = jQuery.parseJSON(jQuery(data).text());

eval( "data = " + data )

2：将返回的类型从application/json改为text/html

3：利用正常进行取出pre

 

// 因为json数据会被<pre>标签包着，所以有问题，现在添加以下代码，
   // update by hzy
   var reg = /<pre.+?>(.+)<\/pre>/g;
   var result = data.match(reg);
   result = RegExp.$1;
   // update end
   data = $.parseJSON(result);

然后输出就正常了

如果直接用$.ajaxFileUpload 方法

可secureuri: false, //注释掉

				$.ajaxFileUpload
				(
					{
					 url: 'UpLoadHeadImg.aspx?random=' + Math.random(), //用于文件上传的服务器端请求地址
					secureuri: false, //一般设置为false
					fileElementId: 'fUpLoad', //文件上传空间的id属性  <input type="file" id="file" name="file" />
					dataType: 'json', //返回值类型 一般设置为json
					}
					);

另一种情况：ajaxFileUpload 报这错jQuery.handleError is not a function

版本1.4.2之前的版本才有handlerError方法，例子里使用的Jquery是1.2的， 解决方法：

dataType: 'json', //直接改成xml /html

附修改好的ajaxfileupload.js 代码：

原地址：http://blog.yadgen.com/?p=970 感谢

jQuery.extend({
	createUploadIframe: function (id, uri) {
		//create frame
		var frameId = 'jUploadFrame' + id;
		var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
		if (window.ActiveXObject) {
			if (typeof uri == 'boolean') {
				iframeHtml += ' src="' + 'javascript:false' + '"';

			}
			else if (typeof uri == 'string') {
				iframeHtml += ' src="' + uri + '"';

			}
		}
		iframeHtml += ' />';
		jQuery(iframeHtml).appendTo(document.body);

		return jQuery('#' + frameId).get(0);
	},
	createUploadForm: function (id, fileElementId) {
		//create form	
		var formId = 'jUploadForm' + id;
		var fileId = 'jUploadFile' + id;
		var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
		var oldElement = jQuery('#' + fileElementId);
		var newElement = jQuery(oldElement).clone();
		jQuery(oldElement).attr('id', fileId);
		jQuery(oldElement).before(newElement);
		jQuery(oldElement).appendTo(form);
		//set attributes
		jQuery(form).css('position', 'absolute');
		jQuery(form).css('top', '-1200px');
		jQuery(form).css('left', '-1200px');
		jQuery(form).appendTo('body');
		return form;
	},

	ajaxFileUpload: function (s) {
		// TODO introduce global settings, allowing the client to modify them for all requests, not only timeout		
		s = jQuery.extend({}, jQuery.ajaxSettings, s);
		var id = new Date().getTime();
		var form = jQuery.createUploadForm(id, s.fileElementId);
		var io = jQuery.createUploadIframe(id, s.secureuri);
		var frameId = 'jUploadFrame' + id;
		var formId = 'jUploadForm' + id;
		// Watch for a new set of requests
		if (s.global && !jQuery.active++) {
			jQuery.event.trigger("ajaxStart");
		}
		var requestDone = false;
		// Create the request object
		var xml = {};
		if (s.global)
			jQuery.event.trigger("ajaxSend", [xml, s]);
		// Wait for a response to come back
		var uploadCallback = function (isTimeout) {
			var io = document.getElementById(frameId);
			try {
				if (io.contentWindow) {
					xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;
					xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document;

				} else if (io.contentDocument) {
					xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;
					xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document;
				}
			} catch (e) {
				jQuery.handleError(s, xml, null, e);
			}
			if (xml || isTimeout == "timeout") {
				requestDone = true;
				var status;
				try {
					status = isTimeout != "timeout" ? "success" : "error";
					// Make sure that the request was successful or notmodified
					if (status != "error") {
						// process the data (runs the xml through httpData regardless of callback)
						var data = jQuery.uploadHttpData(xml, s.dataType);
						// If a local callback was specified, fire it and pass it the data
						if (s.success)
							s.success(data, status);

						// Fire the global callback
						if (s.global)
							jQuery.event.trigger("ajaxSuccess", [xml, s]);
					} else
						jQuery.handleError(s, xml, status);
				} catch (e) {
					status = "error";
					jQuery.handleError(s, xml, status, e);
				}

				// The request was completed
				if (s.global)
					jQuery.event.trigger("ajaxComplete", [xml, s]);

				// Handle the global AJAX counter
				if (s.global && ! --jQuery.active)
					jQuery.event.trigger("ajaxStop");

				// Process result
				if (s.complete)
					s.complete(xml, status);

				jQuery(io).unbind();

				setTimeout(function () {
					try {
						jQuery(io).remove();
						jQuery(form).remove();

					} catch (e) {
						jQuery.handleError(s, xml, null, e);
					}

				}, 100);

				xml = null;

			}
		};
		// Timeout checker
		if (s.timeout > 0) {
			setTimeout(function () {
				// Check to see if the request is still happening
				if (!requestDone) uploadCallback("timeout");
			}, s.timeout);
		}
		try {

			var form = jQuery('#' + formId);
			jQuery(form).attr('action', s.url);
			jQuery(form).attr('method', 'POST');
			jQuery(form).attr('target', frameId);
			if (form.encoding) {
				jQuery(form).attr('encoding', 'multipart/form-data');
			}
			else {
				jQuery(form).attr('enctype', 'multipart/form-data');
			}
			jQuery(form).submit();

		} catch (e) {
			jQuery.handleError(s, xml, null, e);
		}

		jQuery('#' + frameId).load(uploadCallback);
		return { abort: function () { } };

	},

	// handleError 方法在jquery1.4.2之后移除了，此处重写改方法
	handleError: function (s, xhr, status, e) {
		// If a local callback was specified, fire it
		if (s.error) {
			s.error.call(s.context || s, xhr, status, e);
		}

		// Fire the global callback
		if (s.global) {
			(s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
		}
	},

	uploadHttpData: function (r, type) {
		var data = !type;
		data = type == "xml" || data ? r.responseXML : r.responseText;
		//20161018 add 带有<pre>标签
		var reg = /<pre.+?>(.+)<\/pre>/g;  
		var result = data.match(reg);  
		data = RegExp.$1;
		// 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();

		return data;
	}
});

参考

http://blog.csdn.net/gavinluo99/article/details/50464934

http://shipengliang.com/html-css-javascript/ajaxfileupload-jquery-handleerror-is-not-a-function%E4%BF%AE%E5%A4%8D%E5%8A%9E%E6%B3%95.html