一、摘要
最近在做个东西，需要实现页面无刷新文件上传，目前看到的方法有两种
1） 通过隐藏iframe 实现页面无刷新，适用于不关心上传结果
1 <form target="hiddenFrame" method="post" enctype="multipart/form-data" action='xx'> 2 <input value=""/> 3 <iframe name="hiddenFrame" style="display:none"/> 4 </form>
2） 使用ajax 请求， 使用formData 对象传输二进制文件，适用于获取后端返回的数据并进行处理
1 var fd = new FormData($('#form')); 2 $.ajax({ 3 url: '', 4 type: 'get', 5 data: fd, 6 async: false, 7 cache: false, 8 contentType: false, // 告诉jQuery不要去设置Content-Type请求头 9 processData: false, // 告诉jQuery不要去处理发送的数据 10 success: function (data) { 11 12 } 13 })
两种方法第一种实现简单，浏览器支持度高， 第二种formData的实现方式，可以对上传是否成功，或者针对上传文件内容进行解析的内容进行处理，但是浏览器支持率不高，具体如下
桌面端：
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 7+ | 4.0 (2.0) | 10+ | 12+ | 5+ |
支持filename参数 |
(Yes) | 22.0 (22.0) | ? | ? | ? |
移动端：
| Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 3.0 | ? | 4.0 (2.0) | ? |
12+ |
? |
支持filename参数 |
? | ? | 22.0 (22.0) | ? | ? | ? |
FormData 是 XMLHttpRequest Level 2 的新接口， 作用有两大类
1） 封装form 表单
2） 传输二进制文件，实现无刷新文件上传
FormData的API
fd.append(key, value); // 可以在封装form 表单的基础上增加数据