Ajax文件上传
一般提到ajax,我们一般会有两种方式，比较广为使用的是XHttpRequest，但是由于我们在客户端无法直接访问本地文件，因此使用xhttprequest进行文件上传的方式似乎不可行，那么不妨看看另外一种ajax方式，即利用frame。
前置知识
form的target属性
| 值 | 描述 |
| _blank | 在新窗口中打开 |
| _self | 默认。在相同的框架中打开 |
| _parent | 在父框架集中打开 |
| _top | 在整个窗口中打开 |
| framename | 在指定的框架中打开 |
在这里，我们设置了form的target属性后，表单提交后返回的内容只会刷新指定的框架而不会影响当前页面，这样我们就实现了无刷新即ajax上传。
基本原理
html结构式这样的：
|
1
2
3
4
5
|
<form action="/upload" method="post" target="iframe1"><input type="file"/><input type="submit" value="上传"/></form><iframe name="iframe1" src="javascript:false;"></iframe> |
这样我们就完成了一个基本的文件上传了，so easy吧。。
然后我们只需要处理iframe的onload的事件，获取上传信息
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
iframe.onload = function(){ var doc = iframe.contentDocument; if(doc.readyState && doc.readyState !== 'complete'){ return; } if(doc.body && doc.body.innerHtml == 'false'){ return; } if (doc.XMLDocument) { response = doc.XMLDocument; }else if(doc.body){ response = doc.body.innerHtml; } //do anything you want} |
这样一个简单的上传文件就ok了。
坑
ie下无法识别application/json格式，因此服务端返回时不能直接返回json格式，需要转化成string在客户端在解析。ok