ajaxFileUpload插件，C#返回Json数据报错问题的解决方案

报错信息一：jQuery.handleError is not a function

上传图片的时候，通过F12，查看到这个错误。

解决方案：

jquery版本问题，handlerError只在jquery-1.4.2之前的版本中存在，jquery-1.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]);
  }
 },

示例：

报错信息二：SyntaxError:unexpected token <

解决了上述错误以后，出现了新的错误：

解决方案：

几经周折，通过查看ajaxFileUpload.js的源码，我发现下面这样一段代码：

这里可以看到，返回的数据类型。其中类型为json的时候，是直接用eval函数生成Json对象的，所以我猜测，这里转对象的时候，报错了。于是我在上面添加了一个alert，看一看未转换之前的数据格式是什么样的。

通过alert弹窗发现，返回数据的格式如下：

此时就可以解释通，为何转换不了对象了。因为它已经不是一个正确的Json格式数据了，外面包了一层<pre>标签，导致eval生成Json对象的时候解析失败。

解决的思路为去掉前后<pre>标签，使data变成正确的Json格式数据，然后再用eval函数完成Json对象的生成。

Js代码方式一（红色标记为去掉<pre>标签）：

function FileUpload() {
 $.ajaxFileUpload({
  url: '/Common/Image',
  fileElementId: 'upload_img',
  dataType: 'content',//此处写content，是因为想让ajaxFileUpload直接return data数据，即带<pre>标签的数据。
  success: function(data) {
   var reg = /<pre.+?>(.+)<\/pre>/g;
   var result = data.match(reg);
   data = RegExp.$1;
   var obj = eval("data=" + data); //转josn
   if (obj.error == 1) {
    $("#images_src").attr("src", obj.msg);
    $("#img_path").val(obj.msg);
   } else {
    alert("失败");
   }

  },
  error: function(data, status, e) {
   alert(e);
  }
 });
 return false;
}

Js代码方式二（通过修改ajaxFileUpload内部方法，红色标记为去掉<pre>标签）：

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();
 //此处是去掉<pre>标签的代码，新添加一种类型，前台js的dataType类型写content，即dataType: 'content'
 if (type == "content") {
  var reg = /<pre.+?>(.+)<\/pre>/g;
  var result = data.match(reg);
  data = RegExp.$1;
  eval("data = " + data);
 }
 return data;
}

以上是在QQ浏览器进行的，当我使用火狐浏览器的时候，又出现了新的错误。

报错信息三：ReferenceError: $ is not defined

解决方案：

没有看懂错误信息，通过用最开始的方法，我在ajaxFileUpload.js代码中写了alert，弹一下data数据，发现数据格式变成这样：

<pre>标签的内容发生了变化，所以我改变了思路，通过indexOf定位< >，然后只取标签中间的内容。代码如下：

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();
 //此处是去掉<pre>标签的代码
 if (type == "content") {
　　　　 //------以下是修改的代码------
  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);
 }
 return data;
}

后来想了想，可以用过大括号来筛选，这样更准确一些吧。

var start = data.indexOf("{");
if (start != -1) {
 var end = data.indexOf("}", start + 1);
 if (end != -1) {
  data = data.substring(start + 1, end);
 }
}

总结

以上所述是小编给大家介绍的ajaxFileUpload插件，C#返回Json数据报错问题的解决方案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁

    PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁

    昨天花了点时间整合了一下头像插件 东拼西凑的成果 先来看下效果 1.先使用ajaxfileupload插件做异步上传.这个地方我本来想做个上传进度的效果,但技术有限失败了.上传按钮我还做了一个文件大小的限制,但是由于浏览器兼容性的问题,不完美在IE6--IE9之间还有很多问题需要解决 getFileSize函数是用于判断文件大小的函数 复制代码 代码如下: function getFileSize(fileName) {                var byteSize = 0;     

  • C#中DataTable 转换为 Json的方法汇总(三种方法)

    C#中DataTable 转换为 Json的方法汇总(三种方法)

    在web开发中,我们可能会有这样的需求,为了便于前台的JS的处理,我们需要将查询出的数据源格式比如:List<T>.DataTable转换为Json格式.特别在使用Extjs框架的时候,Ajax异步请求的数据格式就是Json.鉴于此,我今天来分享将DataTable 转换成 Json的3种方法.换句话说如何在ASP.NET将一个DataTable序列化为 Json数组.或者如何从一个DataTable返回一个Json字符串.这篇文章将采用StringBuilder,JavaScriptSeri

  • C#中实现Json序列化与反序列化的几种方式

    C#中实现Json序列化与反序列化的几种方式

    什么是JSON? JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write and easy for machines to parse and generate. JSON is a text format that is completely language independent. 翻译:Json[javascrip

  • 利用ajaxfileupload插件实现文件上传无刷新的具体方法

    做项目的时候遇到了这样一个问题,如果用普通的ASP.NET FileUpload控件实现文件上传,那么页面会刷新,那么页面上用JS拼出的元素就会消失,为了上传文件,又不能刷新页面,ajaxfileupload插件是一个很好的选择(插件下载地址:http://files.jb51.net/file_images/article/201306/js/ajaxfileupload.js) ajaxfileupload是jQuery的一个插件,使用这个插件同时要引用jQuery.js文件 直接上代码吧

  • C#实现集合转换成json格式数据的方法

    本文实例讲述了C#实现集合转换成json格式数据的方法.分享给大家供大家参考,具体如下: /// <summary> /// dataTable转换成Json格式 /// </summary> /// <param name="dt"></param> /// <returns></returns> public static string ToJson(DataTable dt) { if (dt != null

  • 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子

    jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法. 使用说明 需要使用jQuery库文件 和AjaxFileUpload库文件 使用实例 一,包含文件部分 复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script> <scr

  • ajaxFileUpload.js插件支持多文件上传的方法

    前提条件: ajaxFileUpload.js插件多文件上传 步骤: 1.修改源码,(源码只支持单个文件的上传): 复制代码 代码如下: //修改前代码------- //var oldElement = jQuery('#' + fileElementId); //var newElement = jQuery(oldElement).clone(); //jQuery(oldElement).attr('id', fileId); //jQuery(oldElement).before(ne

  • jquery之ajaxfileupload异步上传插件(附工程代码)

    点我下载工程代码 由于项目需求,在处理文件上传时需要使用到文件的异步上传.这里使用Jquery Ajax File Uploader这个组件下载地址:http://www.phpletter.com/download_project_version.php?version_id=6 服务器端采用struts2来处理文件上传. 所需环境: jquery.js ajaxfileupload.js struts2所依赖的jar包 及struts2-json-plugin-2.1.8.1.jar 编写文

  • C#实现DataTable,List和Json转换的方法

    本文实例讲述了C#实现DataTable,List和Json转换的方法.分享给大家供大家参考,具体如下: 1. 将DataTable或Ilist<>转换成JSON格式 using System; using System.Data; using System.Text; using System.Collections.Generic; using System.Reflection; /// <summary> /// 将DataTable或Ilist<>转换成JSO

  • ajaxFileUpload插件，C#返回Json数据报错问题的解决方案

    报错信息一:jQuery.handleError is not a function 上传图片的时候,通过F12,查看到这个错误. 解决方案: jquery版本问题,handlerError只在jquery-1.4.2之前的版本中存在,jquery-1.4.2之后的版本中都没有这个函数了.通过添加下面代码,解决错误. handleError: function(s, xhr, status, e) { // If a local callback was specified, fire it i

  • C# ODP.NET 调用Oracle函数返回值时报错的一个解决方案

    有人在社区问到:C#调用Oracle中自定义函数的返回值时,无法正常调用.但在PL/SQL中正常调用返回. 于是动手一试: 1.准备函数(Oralce 11g.2.0.0.4) CREATE OR REPLACE FUNCTION F_Update_Grade(v_UserID in Number) return nvarchar2 is V_Grade nVARCHAR2(20); begin V_Grade := '1205'; update TESTDB3 set Grade = V_Gr

  • DropDownList绑定选择数据报错提示异常解决方案

    抛出的异常信息:异常详细信息: System.ArgumentOutOfRangeException: "ddlTotalCostDiscount "有一个无效 SelectedValue,因为它不在项目列表中. 原先给DropDownList这样赋值: this.ddlTotalCostDiscount.SelectedValue = obj.TotalCostDiscount.ToString(): 改成这样赋值: ddlTotalCostDiscount.SelectedInde

  • SpringBoot返回Json对象报错(返回对象为空{})

    SpringBoot返回Json对象报错(返回对象为空{})

    目录 1 需求描述 2 代码展示 3 原因分析 4 解决方案 5 效果展示 6 结束语 1 需求描述 我们现在要干一个什么事情呢,我们要在浏览器输入一个请求地址,然后我们的后端就给我返回一个User对象即可,并且我希望以Json的格式返回.这个需求很明确,我们先直观的展示一下效果.发送请求: 接受结果: 2 代码展示 行了,明确了需求我们开始整活儿.首先我们老规矩还是先展示一下目录结构(其中标红的文件使我们今天要用到的): 接下来是具体的文件内容首先呢我们展示一下User.java文件 pack

  • 解决Django响应JsonResponse返回json格式数据报错问题

    代码 return JsonResponse({"name": "tom"}) 报错: TYPEERROR: In order to allow non-dict objects to be serialized set the safe parmeter to False 解决: return JsonResponse({"name": "tom"}, safe=False) 增加safe=false,使其接受列表 补充知识

  • 解决spring mvc 返回json数据到ajax报错parseerror问题

    最近使用ajax接收spring mvc传过来的json数据时总是出现parseerror的错误,错误源码如下: 前端: $.ajax({ type: 'POST', url: "groupFunctionEdit", dataType: 'json', contentType: "application/json", data: JSON.stringify(functiondata), success: function(data){ alert('数据加载成功

  • asp.net使用ajaxFileUpload插件上传文件（附源码）

    ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http://xiazai.jb51.net/201701/yuanma/ajaxfileupload(jb51.net).rar AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 当初做了个异步上传的功能

  • Struts2 Result 返回JSON对象详解

    如果是作为客户端的HTTP+JSON接口工程,没有JSP等view视图的情况下,使用Jersery框架开发绝对是第一选择.而在基于Spring3 MVC的架构下,对HTTP+JSON的返回类型也有很好的支持.但是,在开发工作中,对功能的升级是基于既定架构是很常见的情况.本人碰到需要用开发基于Struts2的HTTP+JSON返回类型接口就是基于既定框架结构下进行的. Struts2返回JSON有两种方式:1.使用Servlet的输出流写入JSON字符串:2.使用Struts2对JSON的扩展.

  • php返回json数据函数实例

    本文实例讲述了php返回json数据函数的用法,分享给大家供大家参考.具体方法如下: json_encode()函数用法: echo json_encode(array('a'=>'bbbb','c'=>'ddddd'); 这样就会生成一个标准的json格式的数据 <?php //需要执行的SQL语句 //单条 $sql="select id,name from tbl_user where id=1"; //多条数据 //$sql="select id,n

随机推荐