jQuery插件之ajaxFileUpload API文档
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文档的更多相关文章
- jQuery MiniUI开发系列之:使用API文档
jQuery MiniUI在组件设计上,是简约.独立的,没有复杂的继承体系. 比如使用DataGrid,可以在api文档的datagrid部分,查找到datagrid的所有属性.方法.事件,而无需关注 ...
- jQuery弹出层---artDialog 文档
artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应 ...
- grunt api 文档
Grunt docs Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. 安装 grunt-cli npm install grunt-cli -g 注 ...
- SpringBoot中使用springfox+swagger2书写API文档
随着前后端的分离,借口文档变的尤其重要,springfox是通过注解的形式自动生成API文档,利用它,可以很方便的书写restful API,swagger主要用于展示springfox生成的API文 ...
- WebUploader API文档
Web Uploader内部类的详细说明,以下提及的功能类,都可以在WebUploader这个变量中访问到. As you know, Web Uploader的每个文件都是用过AMD规范中的defi ...
- Android浏览本地 API文档 + 解决页面加载慢的问题
火狐浏览器安装离线浏览插件: 用浏览器打开index.html文件,你会发现加载的很慢,原因你懂的,为此,我们可以通过离线的方式 查看本地API文档,用火狐浏览器 + Work Offline插 ...
- 使用jsdoc-toolkit实现JS API文档自动化
在前面的博文中探讨自动化工程问题时,写过基于NodeJS的,使用gulp.grunt的jsdoc插件实现文档自动化.本文探讨基于java环境的自动化实现. 一.Java安装与环境配置 关于Java的安 ...
- HighCharts 详细使用及API文档说明
一.HighCharts开发说明: HighCharts开发实际上配置HighCharts每个部分,比如配置标题(title),副标题(subtitle)等,其中每个部分又有更细的参数配置,比如标题下 ...
- 使用jsdoc-toolkit来自动生成js api文档
近来前端组小盆友开发的类库越来越多,很多情况下彼此不知道写了些什么方法,为了更好的合作提高工作效率,找了个比较好的api文档生成方法.使用jsdoc-toolkit来自动生成js api文档. 一. ...
随机推荐
- Gty的妹子树(bzoj 3720)
Description 我曾在弦歌之中听过你, 檀板声碎,半出折子戏. 舞榭歌台被风吹去, 岁月深处尚有余音一缕…… Gty神(xian)犇(chong)从来不缺妹子…… 他来到了一棵妹子树下,发现每 ...
- 最短路中部分点只能从中任意选取K个问题
题意:给N个点,还有另外m个点(其中只能选K个),求最短路. 思路:在SPFA的基础上,用一个数组来统计,在某点入队时(要拓展其他点了),若该点是m个点中的,则count[i]=原来的+1:若不是,则 ...
- Codechef Yet another cute girl
题意大概就是让你求一下[L,R]中的约数个数是素数的数的个数. 其中1<=L<=R<=1e12,R-L<=1e6. 然后我写了两种做法,第一种是可以直接搞出来L-R的约数个数, ...
- the import org.springframewok.test cannot be resolved
在写Spring的单元测试时遇见了问题,注解@ContextConfiguration和SpringJUnit4ClassRunner.class无法导包.手动导包后错误为“the import or ...
- Effective Java P2 Item1 Consider static factory methods instead of constructors
获得一个类的实例的传统方法是公共的构造方法,还可以提供一个公共的静态工厂方法(一个返回值为该类实例的简单静态方法), 例如Boolean(boolean 的封装类) public static Boo ...
- Word中将文本框、图形对象中的文本边距调整
在进行word的实际使用中,如下图制作流程图时,常常发现文字在图形对象中,老是显示不全,而且上部却空出很多距离.此时可以通过设置形状格式--文本框 --- 上.下编辑进行设置. 可以完美解决文本框中文 ...
- 【面试 JVM】【第六篇】JVM调优
六部分内容: 一.内存模型 1.程序计数器,方法区,堆,栈,本地方法栈的作用,保存那些数据 可以画个大图出来,很清晰 jvm内存模型主要指运行时的数据区,包括5个部分. 栈也叫方法栈,是线程私有的,线 ...
- scp、paramiko、rsync上传下载限流、限速、速度控制方法
1.scp限速 scp -l 800 a.txt user@ip:/home/admin/downloads 此时的传输速率就是800/8=100KB左右 man -a scp查看参数含义.注意单 ...
- ivy 入门
ivy 入门 http://www.blogjava.net/aoxj/archive/2009/03/31/263012.html https://www.cnblogs.com/end/archi ...
- hdu 5338 ZZX and Permutations (贪心+线段树+二分)
ZZX and Permutations Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/O ...