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

一、摘要

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

1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果

 <form target="hiddenFrame" method="post" enctype="multipart/form-data" action='xx'>
<input value=""/>
<iframe name="hiddenFrame" style="display:none"/>
</form>

2) 使用ajax 请求, 使用formData 对象传输二进制文件,适用于获取后端返回的数据并进行处理

 var fd = new FormData($('#form'));
$.ajax({
url: '',
type: 'get',
data: fd,
async: false,
cache: false,
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
processData: false, // 告诉jQuery不要去处理发送的数据
success: function (data) { }
})

两种方法第一种实现简单,浏览器支持度高, 第二种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 表单的基础上增加数据

上一篇:ie8实现无刷新文件上传


下一篇:[moka同学笔记]yii2场景的使用(摘录)