前言
在当今的 Web 开发中，表单数据的处理是一个非常常见的操作。其中，FormData 对象是一个很强大的工具，可以非常方便地处理表单数据。但由于历史原因，这个工具在一些老版本的浏览器中并不被支持。为了解决这个问题，有开发者写了一个 npm 包：formdata-polyfill。这个包可以让我们在不支持 FormData 对象的浏览器中，依然可以使用这个工具。
在本篇文章中，我们将会介绍如何使用 formdata-polyfill 包，以及如何在一些旧版本的浏览器中进行我们需要的表单数据操作。
安装
首先，我们需要安装这个 npm 包。在终端中输入下面的命令：
npm install formdata-polyfill --save
这条命令会将这个包下载到我们的本地项目目录中，并在 package.json 文件的 dependencies 中添加对应的信息。
使用
接下来，我们需要在项目中引用 formdata-polyfill 包。在 JavaScript 代码中添加下面的代码：
import 'formdata-polyfill';
这样就可以在我们的项目中使用 FormData 对象了。
代码示例
在下面的例子中，我们将通过一个表单来演示如何使用 formdata-polyfill 包。这个表单包括一个文本输入框和一个文件上传框，用户可以输入一些文字和上传一张图片。我们将会将这些数据通过 Ajax 请求提交到服务器端。
<form> <input type="text" name="text" /> <input type="file" name="file" /> <button>Submit</button> </form>
-- -------------------- ---- -------
------ --------------------
----- ---- - -------------------------------
------------------------------- ------- -- -
-----------------------
----- ---- - --- ---------------
-------------------- -
------- -------
----- -----
--
-------------- -- ----------------
---------- -- -
------------------
--
------------ -- -
---------------------
---
---在这个例子中，我们首先通过 querySelector 方法获取了一个表单元素 form。然后，我们对这个表单添加了一个 submit 事件监听器。在监听器中，我们使用 FormData 对象来获取表单数据，并将其作为 fetch 方法的参数提交到服务器。
总结
通过本篇文章的介绍，我们学会了如何安装和使用 formdata-polyfill 包，以便在不支持 FormData 对象的浏览器中依然可以使用这个工具。我们也通过一个表单的例子来演示了如何使用 FormData 对象来搜集表单数据并进行数据提交操作。这个例子不仅具有很好的学习意义，也可以帮助我们更好地理解和掌握前端表单数据处理的技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3d1a1fdbf7be33b25670fe