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

时间：2021-04-21 16:34:40

一、摘要

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

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

相关文章