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. Linux(6):定时任务

    定时任务 定时任务的说明和分类 # 定时任务分类: 1. crond(crontab) 定时任务软件(软件包 cronie) 2. atd 运行一次 3. anacron 非7*24小时运行的服务器 ...

  2. BZOJ 2973 入门OJ4798 石头游戏

    矩阵递推 #include <iostream> #include <cstdio> #include <cstdlib> #include <cstring ...

  3. NOJ1203 最多约数问题 [搜索 数论]

    传送门 njczy2010 1203 Accepted 79MS   1400K 2321Byte G++ 2015-01-25 13:14:25.0 最多约数问题 时间限制(普通/Java) : 2 ...

  4. unity的List构造函数在IOS平台存在缺陷

    当迩使用一个int[]或者string[]类似的数组时,以数组来初始化List对象,有可能在IOS平台上会出现初始化对象为空,比如 , }; List<int> listTest = ne ...

  5. AC日记——[USACO08DEC]干草出售Hay For Sale 洛谷 P2925

    题目描述 Farmer John suffered a terrible loss when giant Australian cockroaches ate the entirety of his ...

  6. HDU 5667 Sequence【矩阵快速幂+费马小定理】

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5667 题意: Lcomyn 是个很厉害的选手,除了喜欢写17kb+的代码题,偶尔还会写数学题.他找到 ...

  7. 创建ROS工作空间和包

    一.创建工作空间 mkdir -p ~/openni_ws/src cd ~/openni_ws catkin_make        //在catkin工作空间(openni_ws)下catkin_ ...

  8. centos6安装概述

    1.1.选择安装类型:[Install or upgrade an existing system]安装或升级现有系统 1.2.介质校验:[Skip]跳过介质校验,校验时间较长 1.3.语言选择:[E ...

  9. NOIP临考经验(转)

    [COGS]NOIP临考经验 1.  提前15分钟入场,此时静坐调整心态,适当的深呼吸 2.  打开编辑器并调整为自己喜欢的界面 3.  熟悉文件目录,写好准确无误的代码模板 4.  压缩包或许还不能 ...

  10. 【面试 AOP】【第八篇】AOP的问题

    1.AOP的原理以及应用场景 面向切面编程,不修改原有代码逻辑的情况下进行逻辑增强. 使用场景:短信业务,restful返回统一响应体等等. ============================= ...