Ajax之魂-WEB中的XMLHttpRequest规范：附FormData详解

2023年3月1日 315次阅读 来源: JSON_NULL

写在前面

之所以会有此篇有两个原因：

  1. FormData对于XMLHttpRequest非常重要，所有以Ajax方式上传文件的功能都需要用到它。
  2. XMLHttpRequest规范的内容太多了，放到一篇中介绍实现是太过宠大；不仅对于作者来说负担太重，对于读者来说也不宜消化。

基于以上原因，我就把FormData单独出来了。

此篇一定要结合Ajax之魂-WEB中的XMLHttpRequest规范一起看；并且此篇是以
Ajax之魂-WEB中的XMLHttpRequest规范的附录出现的，所以如果单独看了此篇，意义不大。

FormData 定义

以下代码来自W3C的“XMLHttpRequest Level 1”规范。

[Constructor(optional HTMLFormElement form )]
interfaceFormData { 

  void append([EnsureUTF16] DOMStringname, Blob value, optional EnsureUTF16] DOMStringfilename );

  void append([EnsureUTF16] DOMStringname, [EnsureUTF16] DOMStringvalue);

};

FormData对象可以描述为是一列表有序的name和value组成的条目（此处为直译，因为以作者的水平实现不知道应该翻译成中文应该使用哪个词语，英文为：entry）。也就是说，有一组（数量不定且可变）条目组成了FormData对象，这些条目中和每一个都包含两个属性，分别是name和value。

在一个条目中，如果它的value属性是String类型的，那么这个条目就是String类型的，否则这个条目就是File类型的。如果条目是File类型的，它的文件名存储在条目的value属性的name特性（可以说是属性，这里翻译为特性仅仅是为了和属性区分开）中。

创建FormData对象

fd = new FormData([form]);

参数form是可选的，如果传了参数，则form必须是一个HTML 中 form 元素的DOM对象。

创建FormData 对象的示例代码

调用无参构造函数，创建一个空的FormData对象

// 无参构造函数
fd = new FormData();

利用JavaScript代码创建一个 form 元素的DOM对象，然后传参给FormData的构造器得到有初始值的FormData对象

// 构造 form 元素的DOM对象
form = document.createElement("form"); 
input = document.createElement("input");
input.name = "username";
input.value = "仵士杰";
form.appendChild(input);
fd = new FormData(form);

利用HTML中的form表单获取 form 元素的DOM对象，然后传参给FormData的构造器得到有初始值的FormData对象

//HTML代码如下
<!DOCTYPE HTML>
<html>
<head><meta charset="UTF-8" /></head>
<body>
    <form id="myForm">
      <input name="username" value="仵士杰" />
    </form>
</body>
</html>

//JavaScript代码如下
form = document.getElementById("myForm");
fd = new FormData(form);

FormData 对象的创建过程

FormData对象的构造函数的执行步骤如下：

  1. 把 变量 fd 设置为了个新的FormData对象
  2. 如果传了form参数，从form表单中构造数据集，并设置 fd 的 entries 。
  3. 返回 fd

向FormData对象中加入新的条目

fd.append(name,value [,filename]);

上面的代码向FormData对象中加入了一个条目

参数说明

name：添加成功后将其值赋给条目的name属性，必传参数；
value：添加成功后将a其值赋给条目的value属性，必传参数；
filename：可选参数，如果value的类型为File，filename参数的值将被赋给条目中value属性的name特性。

向FormData对象中加新条目的过程

  1. 把 变量 entry 设置成一个新的 条目对象
  2. 把参数name的值赋给entry中的name属性
  3. 如果value是Blob类型的对象，则把value转换成的File对象后将value的name特性值设为“blob”。
  4. 如果value是File类型的对象，且给定了filename参数，则把filename的值赋给value中的name特性。
  5. 把value赋值给entry的value属性。
  6. 把 entry 添加到FormData对象的entries列表中。

打完收功

以上就是有关FormData的全部介绍，作者已经尽力写到最详尽；如果您还有疑问请留言，作者将尽量改进，以期帮助到更广大的WEB工程师和爱好者。

    原文作者：JSON_NULL
    原文地址: https://www.jianshu.com/p/5ab642adce8b
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞