HTML5 FormData 方法介绍以及实现文件上传

时间：2021-07-22 12:59:36

XMLHttpRequest 是一个浏览器接口，通过它，我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月，XMLHttpRequest Level 2 草案提出来了，相对于上一代，它有一些新的特性，其中 FormData 就是 XMLHttpRequest Level 2 新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。下面就具体介绍一下如何利用 FormData 来上传文件。

FormData 上传文件实例

首先看一下formData的基本用法：FormData对象，可以把所有表单元素的name与value组成一个queryString，提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可：


var file;

//获取目前上传的文件

file = image.files[0];  //获取上传的文件名

var formData = new FormData();

formData.append('image', file); //append方法传入formData中

这样就可以直接通过ajax 的 send() 方法将 fd 发送到后台。

以下创建了一个表单 form，表单中除了普通的数据外，还有文件上传，我们直接将 form对象作为参数传入FormData对象：


<input type="file" class="file" id="image" accept="image/gif,image/jpeg,image/jpg,image/png" />

  <button id="test" onclick="func()">demo</button>

上述代码创建一个上传图片。

HTML5 FormData 方法介绍以及实现文件上传

我们初始用jquery ajax 来进行请求数据 代码如下

     var url = "http://localhost:8100/detection/troop/faster_R_CNN?shape=480&shape=420";

       image_url = "http://localhost/sss/troop.jpg";

       var file;

       //获取目前上传的文件

       file = image.files[0];

       var formData = new FormData();

       formData.append('image', file);

         $.ajax({

         type: "POST",

         url: url,

         data: formData,

         contentType: false, //告诉jQuery不要去设置Content-Type请求头

         headers: {

           Accept: "application/json"

         },

         processData: false, //告诉jQuery不要去处理发送的数据

         success: function (response) {

           console.log(response)

         }

然后我们用XHR原生请求代码如下

1    var url = "http://localhost:8100/detection/troop/faster_R_CNN?shape=480&shape=420";

 2       image_url = "http://localhost/sss/troop.jpg";

 3       var file;

 4       //获取目前上传的文件

 5       file = image.files[0];

 6       var formData = new FormData();

 7       formData.append('image', file);

 8        var xhr = new XMLHttpRequest();

 9        var url = "http://localhost:8100/detection/troop/faster_R_CNN?shape=480&shape=420";;

10        xhr.open('POST', url, true);

11        xhr.setRequestHeader("Accept", "application/json");

12        xhr.send(formData);

我们发现jQuery中ajax请求和XHR对象请求参数并不一样，因为在jquery中ContenType和processData会默认处理发送的数据，会导致请求报错（500错误，jquery给默认封装了

因此在jQuery中要加false这两个参数。就会正常的请求成功。

相关文章