【JS】ajax 实现无刷新文件上传

一、摘要

最近在做个东西，需要实现页面无刷新文件上传，目前看到的方法有两种

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 表单的基础上增加数据

计划、执行、每天高效的活着学着