FormData，File，FileReader 对象整理自mdn

最新推荐文章于 2025-11-11 22:31:26 发布

原创

最新推荐文章于 2025-11-11 22:31:26 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

这篇博客详细介绍了FormData对象的使用，包括如何利用它发送表单数据和独立发送键值对。此外，还讲解了File对象在上传文件过程中的作用，并提供了获取FileList对象的示例。同时，文章探讨了FileReader对象，它是如何异步读取用户设备上文件内容的关键，用于处理File或Blob对象。文中包含实际的代码示例和相关HTML元素的files属性应用。

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); //数字123456会被立即转换成字符串 "123456"

// HTML 文件类型input，由用户选择
formData.append("userfile", fileInputElement.files[0]);

// JavaScript file-like 对象
var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);

var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

使用FormData对象上传文件
form表单