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. 数字梯形(cogs 738)

    «问题描述:给定一个由n 行数字组成的数字梯形如下图所示.梯形的第一行有m 个数字.从梯形的顶部的m 个数字开始,在每个数字处可以沿左下或右下方向移动,形成一条从梯形的顶至底的路径.规则1:从梯形的顶 ...

  2. POJ2486 Apple Tree

    Time Limit: 1000MS   Memory Limit: 65536KB   64bit IO Format: %lld & %llu Description Wshxzt is ...

  3. ajax 提交数组,mybatis 数组接受

    function jinxingzhong() { // 配送单编号:psd2017090103 var divHtml = ""; $.ajax({ type: "PO ...

  4. AC日记——[网络流24题]方格取数问题 cogs 734

    734. [网络流24题] 方格取数问题 ★★☆   输入文件:grid.in   输出文件:grid.out   简单对比时间限制:1 s   内存限制:128 MB «问题描述: 在一个有m*n ...

  5. Linux出现cannot create temp file for here-document: No space left on device的问题解决

    在终端输入:cd /ho 按tab键时,显示错误: bash: cannot create temp file for here-document: No space left on device 这 ...

  6. validation set以及cross validation的常见做法

    如果给定的样本充足,进行模型选择的一种简单方法是随机地将数据集切分成三部分,分为训练集(training set).验证集(validation set)和测试集(testing set).训练集用来 ...

  7. springboot mybatis 项目框架源码 shiro 集成代码生成器 ehcache缓存

    1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2. ...

  8. C语言里字符串的解析

      根据给定的字符串,按照一定规则解析字符串,卡住好几次,这次做个笔记,以供参考 函数名称:   strtok 函数原型:   char *strtok(char *s1, const char *s ...

  9. 用df命令显示磁盘使用量和占用率。

    使用“df -k”命令,以k为单位显示磁盘使用量和占用率. root@gsg43:/tmp# df -kFilesystem     1K-blocks    Used Available Use% ...

  10. Android锁屏或灭屏状态下,高速按两次音量下键实现抓拍功能(1.2Framework层使用startService形式实现)

        如前一篇博文所分析.我们能够使用广播的形式在高速按下两次音量下键的时候发出广播,以方便client进行捕捉. 既然有两种方式能够实现该Issue那么哪种方式是首选呢?     我个人推荐使用启 ...