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对象