ajaxFileUpload是一个异步上传文件的jQuery插件。

语法:$.ajaxFileUpload([options])

options参数说明:

1、url            上传处理程序地址。  
2,fileElementId       需要上传的文件域的ID,即<input type="file">的ID。
3,secureuri        是否启用安全提交,默认为false。 
4,dataType        服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。
5,success        提交成功后自动执行的处理函数,参数data就是服务器返回的数据。
6,error          提交失败自动执行的处理函数。
7,data           自定义参数。这个东西比较有用,当有数据是与上传的图片相关的时候,这个东西就要用到了。
8, type            当要提交自定义参数时,这个参数要设置成post

错误提示:

1,SyntaxError: missing ; before statement错误
  如果出现这个错误就需要检查url路径是否可以访问
2,SyntaxError: syntax error错误
  如果出现这个错误就需要检查处理提交操作的服务器后台处理程序是否存在语法错误
3,SyntaxError: invalid property id错误
  如果出现这个错误就需要检查文本域属性ID是否存在
4,SyntaxError: missing } in XML expression错误
  如果出现这个错误就需要检查文件name是否一致或不存在
5,其它自定义错误
  大家可使用变量$error直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多。

在使用ajaxfileupload上传文件的时候,文件上传成功了,但是返回的json数据一直解析不了。一直提示:Resource interpreted as Document but transferred with MIME type application/json,从字面上理解返回的是文档不能转换为json。但是从服务器那边返回的response里data-type确实是applicaiton/json。困扰很久,查看ajaxfileupload源代码发现,其实ajaxfileupload其实使用iframe+form的方式实现异步上传文件的,如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//穿件form表单函数
 
createUploadForm: function (id, fileElementId, data) {
 
//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>');
 
//上传调用接口
 
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 = s.fileElementId;
 
var form = jQuery.createUploadForm(id, s.fileElementId, s.data); //创建form表单
 
var io = jQuery.createUploadIframe(id, s.secureuri);//创建Iframe

  

知道了上传流程,明白了问题出现在哪里了,是用Iframe的时候,返回的时候会添加上html和body标签。jquery不能直接解析的话,只能自己解析了。

ajaxfileupload调用的时候dataType不用设置,使用默认text/html.返回的数据作处理:

var str = $(data).find("body").text();//获取返回的字符串

var json = $.parseJSON(str);//把字符串转化为json对象

参考文章: http://www.tuicool.com/articles/yUBv6fn

jQuery插件之ajaxFileUpload API文档的更多相关文章

  1. jQuery MiniUI开发系列之:使用API文档

    jQuery MiniUI在组件设计上,是简约.独立的,没有复杂的继承体系. 比如使用DataGrid,可以在api文档的datagrid部分,查找到datagrid的所有属性.方法.事件,而无需关注 ...

  2. jQuery弹出层---artDialog 文档

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应 ...

  3. grunt api 文档

    Grunt docs Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. 安装 grunt-cli npm install grunt-cli -g 注 ...

  4. SpringBoot中使用springfox+swagger2书写API文档

    随着前后端的分离,借口文档变的尤其重要,springfox是通过注解的形式自动生成API文档,利用它,可以很方便的书写restful API,swagger主要用于展示springfox生成的API文 ...

  5. WebUploader API文档

    Web Uploader内部类的详细说明,以下提及的功能类,都可以在WebUploader这个变量中访问到. As you know, Web Uploader的每个文件都是用过AMD规范中的defi ...

  6. Android浏览本地 API文档 + 解决页面加载慢的问题

    火狐浏览器安装离线浏览插件: 用浏览器打开index.html文件,你会发现加载的很慢,原因你懂的,为此,我们可以通过离线的方式 查看本地API文档,用火狐浏览器  +   Work Offline插 ...

  7. 使用jsdoc-toolkit实现JS API文档自动化

    在前面的博文中探讨自动化工程问题时,写过基于NodeJS的,使用gulp.grunt的jsdoc插件实现文档自动化.本文探讨基于java环境的自动化实现. 一.Java安装与环境配置 关于Java的安 ...

  8. HighCharts 详细使用及API文档说明

    一.HighCharts开发说明: HighCharts开发实际上配置HighCharts每个部分,比如配置标题(title),副标题(subtitle)等,其中每个部分又有更细的参数配置,比如标题下 ...

  9. 使用jsdoc-toolkit来自动生成js api文档

    近来前端组小盆友开发的类库越来越多,很多情况下彼此不知道写了些什么方法,为了更好的合作提高工作效率,找了个比较好的api文档生成方法.使用jsdoc-toolkit来自动生成js api文档. 一.  ...

随机推荐

  1. SLF4J 简单日志门面 介绍和使用

    参考:http://singleant.iteye.com/blog/934593        http://liuzidong.iteye.com/blog/776072 介绍: 简单日记门面(s ...

  2. 文艺平衡树(bzoj 3223)

    Description   您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2  ...

  3. POJ3132 Sum of Different Primes

    Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 3473   Accepted: 2154 Description A pos ...

  4. poj 3461 Oulipo,裸kmp

    传送门 Oulipo Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 32373   Accepted: 13093 Desc ...

  5. Python入门--6--今天抄袭人家一篇日志--numpy这个

    Numpy NumPy的主要对象是同种元素的多维数组. 这是一个所有元素都是同一类型.通过一个正整数元祖索引的元素表格(通常元素都是数字) 在Numpy中维度(dimensions)叫做:轴 轴的个数 ...

  6. 在Fedora 22下安装配置RealVNC Server 5.2.3的经验总结

    RealVNC是目前功能最全.性能最好的VNC商业软件套件,很多时候为了确保性能和功能的统一,还是大量地在使用RealVNC.最近在Fedora 22工作站上安装RealVNC Server 5.2. ...

  7. HDU 4920 Matrix multiplication(bitset优化)

    题目链接 Matrix multiplication 求矩阵A和B相乘的结果. 因为答案只要对3取模,所以我们可以通过一些方法来加速计算. 我们对两个矩阵各开两个bitset,分别存储模3余1和模3余 ...

  8. BZOJ——2096: [Poi2010]Pilots

    http://www.lydsy.com/JudgeOnline/problem.php?id=2096 Time Limit: 30 Sec  Memory Limit: 162 MBSubmit: ...

  9. python两个类之间变量和函数的调用

    1.class_a() class_b() 2.class_b使用class_a中的变量和函数 3.变量class_a中:class_a.num=... 函数class_b中:先实例化class_a( ...

  10. 多个Nginx如何实现集群(没具体方案,只是初步探究)

    场景: Nginx+Web服务器可以实现负载均衡,但是一台Nginx也是有限的,如果并非量高的话,在他的上层如何实现负载均衡. 如果是DNS或者CDN的话,建多个机房,势必有多个机房数据同步的问题. ...