首页 > 其他分享 >js进阶——FormData常用知识点介绍

js进阶——FormData常用知识点介绍

时间:2024-09-30 19:23:39浏览次数:7  
标签:知识点 进阶 文件 FormData 表单 let 上传 formData

FormData 是 JavaScript 中用于构建表单数据对象的 API,它主要用于处理 enctype="multipart/form-data" 类型的表单提交,即上传文件和数据。通过 FormData,开发者可以在客户端构建和发送表单数据,尤其是在没有使用传统的 HTML 表单提交时,允许开发者进行更多的自定义和控制。

FormData 的基础知识

1. 什么是 FormData

FormData 对象代表了一个表单的键值对集合,它可以包含多个字段,并且可以包含文件数据。FormData 通常用于通过 AJAX(XMLHttpRequest 或 Fetch)发送数据,避免页面刷新。

2. 如何创建 FormData 实例

可以通过两种方式创建 FormData 实例:

  • 空表单数据:你可以通过 new FormData() 创建一个空的 FormData 对象,并手动填充数据。
  • 基于现有表单元素:你可以通过 new FormData(formElement) 直接传递一个 HTML 表单元素,FormData 会从表单中提取所有的表单字段。
// 创建一个空的 FormData 对象
let formData = new FormData();

// 基于表单元素创建 FormData 对象
let formElement = document.querySelector('form');
let formDataFromForm = new FormData(formElement);
3. FormData 的常用方法

FormData 提供了一些方法来操作表单数据。

  • append(name, value):向 FormData 对象添加一个新的键值对。如果键名已存在,会在值后面追加。
  • delete(name):删除指定键的键值对。
  • get(name):获取指定键的值。
  • has(name):检查指定键是否存在。
  • set(name, value):如果键已存在,会用新值替换原值。
  • forEach(callback):遍历 FormData 对象中的所有键值对。
4. FormData 如何发送数据

FormData 通常通过 XMLHttpRequest 或 Fetch API 发送数据。常见的发送方式是通过 POST 请求。

4.1 使用 XMLHttpRequest
let xhr = new XMLHttpRequest();
xhr.open('POST', '/submit', true);
xhr.onload = function () {
  if (xhr.status === 200) {
    console.log('数据已提交');
  }
};
xhr.send(formData);
4.2 使用 Fetch API
fetch('/submit', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log('数据已提交', data))
.catch(error => console.error('提交失败', error));

FormData 的实际应用

1. 提交表单数据和文件

使用 FormData 可以方便地提交表单数据以及文件。这在许多场景中都有广泛应用,例如上传用户头像、文件或其他数据。

<form id="myForm">
  <input type="text" name="username" />
  <input type="file" name="profilePic" />
  <button type="submit">提交</button>
</form>
let form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  
  let formData = new FormData(form);
  
  fetch('/submit', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => console.log('成功', data))
  .catch(error => console.error('失败', error));
});
2. 文件上传

FormData 在文件上传场景中尤其有用。你可以使用 input[type="file"] 获取文件,并通过 FormData 上传到服务器。

<form id="fileForm">
  <input type="file" id="fileInput" name="file" />
  <button type="submit">上传文件</button>
</form>
let form = document.getElementById('fileForm');
let fileInput = document.getElementById('fileInput');

form.addEventListener('submit', function(event) {
  event.preventDefault();

  let formData = new FormData();
  formData.append('file', fileInput.files[0]);  // 将文件添加到 FormData

  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => console.log('文件上传成功', data))
  .catch(error => console.error('上传失败', error));
});
3. FormData 的动态操作

FormData 允许你动态地添加、删除、修改表单数据,这使得它在一些需要动态处理的场景中非常有用。例如,用户可以选择上传多个文件,或根据不同条件选择是否添加其他数据字段。

let formData = new FormData();
formData.append('name', 'John');
formData.append('age', 30);

console.log(formData.get('name'));  // 输出 John

formData.append('name', 'Jane');  // 添加新的 name 字段
console.log(formData.getAll('name'));  // 输出 ['John', 'Jane']

formData.delete('age');  // 删除 age 字段
console.log(formData.has('age'));  // 输出 false
4. 与 FileReader 配合使用

FormData 可以与 FileReader 配合使用,以实现文件上传前的预览功能。例如,用户选择了文件后,可以预览上传的图片。

<input type="file" id="imageInput" />
<img id="imagePreview" />
let input = document.getElementById('imageInput');
let preview = document.getElementById('imagePreview');

input.addEventListener('change', function(event) {
  let file = event.target.files[0];

  let reader = new FileReader();
  reader.onload = function(e) {
    preview.src = e.target.result;
  };
  
  reader.readAsDataURL(file);
});

性能与注意事项

  1. 内存管理:FormData 对象不会持久化,它只在创建时存储数据。因此,一旦创建了 FormData 对象,你应该在适当的时候将其传递到服务器,避免占用不必要的内存。

  2. 跨浏览器支持:FormData 在现代浏览器中得到了很好的支持,包括 Chrome、Firefox、Safari 和 Edge。但在旧版本的 IE 中不支持,需要适当考虑兼容性。

  3. 文件限制:使用 FormData 上传的文件会受到浏览器和服务器的限制,例如文件大小、上传时间等。对于大文件上传,可能需要分片上传(Chunked Upload)等策略。

  4. 安全性:确保在处理用户上传的文件时进行安全检查,避免服务器端受到恶意文件攻击。

总结

FormData 提供了一种简洁且灵活的方式来处理表单数据,特别适用于文件上传场景。它与 AJAX 的结合使用,使得开发者可以在不重新加载页面的情况下提交数据。理解 FormData 的基本用法,掌握其动态操作方法,可以帮助你更好地处理复杂的表单提交需求。

标签:知识点,进阶,文件,FormData,表单,let,上传,formData
From: https://blog.csdn.net/2301_79858914/article/details/142647751

相关文章

  • 鹏哥C语言54.一维数组(知识点)
    1.1一维数组的创建✌️✌️✌️ 举个例子:! 1.2数组的初始化 特别注意上面第6个,arr6[]实际上算是arr6[7]因为字符串末尾默认放了一个\0......
  • 信息学奥赛复赛复习07-CSP-J2020-03表达式前置知识点-结构体、链表、链式前向星
    PDF文档公众号回复关键字:2024093012020CSP-J题目1优秀的拆分[题目描述]链式前向星模板题,读入n个点,m条边,以及flag,若flag==1则图有向,否则无向。对每个点输出它的每一条边[输入格式]第一行三个数n,m,flag,题意如上所示第2~1+m行,每行三个数,x,y,z,代表从x到y有一条长为z的......
  • 软考知识点
    知识点:计算机的直接寻址方式直接寻址是计算机中的一种基本寻址方式,它在指令执行过程中用于确定操作数的内存地址。以下是直接寻址的相关内容和详细介绍:定义直接寻址是指在指令中直接给出操作数在内存中的地址。CPU通过这个地址直接访问内存来读取或写入操作数。特点直接性:......
  • SQL进阶技巧:如何获取状态一致的分组? | 最大、最小值法
    目录0需求描述1数据准备2问题分析  方法1:最大、最小值法(技巧)  方法2:常规思路3小结 如果觉得本文对你有帮助,那么不妨也可以选择去看看我的博客专栏,部分内容如下:数字化建设通关指南专栏原价99,现在活动价29.9,按照阶梯式增长,直到恢复原价0需求描述星星点......
  • C++学习:模版进阶:非类型模板参数 特化 分离编译
    目录一:非类型模版参数二:模版特化三:函数模版特化四:类模版特化一:全特化(将模板参数列表中所有的参数都确定化)二:偏特化(部分特化或更进一步限制)五:模版分离编译一:非类型模版参数非类型模版参数是在模版参数列表中,跟在模版参数后面的,就是用常量当参数(下面的n就是)templa......
  • Spring Boot 进阶-Spring Boot的全局异常处理机制详解
      我们知道在软件运行的过程中,总会出现各种各样的问题,各种各样的异常,而程序员的主要任务之一就是解决在程序运行过程中出现的这些异常。在很多程序员开发的代码中我们会看到在关键的地方为了保证程序能够有一个正常的反馈,大量地使用了trycatchfinally语句。  大量的......
  • 一些cookie的知识点
    cookie属性:1.domain:指定了cookie应该被发送到哪些域,默认情况下,cookie只会被发送到设置它的那个域。可以设置更广泛的域,比如 .example.com,这样所有子域都可以访问这个cookie。这里我们简单来了解一下域名和子域名。子域名定义:子域名是在域名前面添加......
  • Redis 五大基本数据类型及其应用场景进阶(缓存预热、雪崩 、穿透 、击穿)
    Redis数据类型及其应用场景Redis是什么?Redis是一个使用C语言编写的高性能的基于内存的非关系型数据库,基于Key/Value结构存储数据,通常用来缓解高并发场景下对某一资源的频繁请求,减轻数据库的压力。它支持多种数据类型,如字符串、哈希、列表、集合、有序集合等。Redis......
  • 书生大模型实战(从入门到进阶)L2-茴香豆:企业级知识库问答工具
    目录茴香豆介绍 茴香豆本地标准版搭建 环境搭建配置服务器:搭建茴香豆虚拟环境:安装茴香豆下载茴香豆 安装茴香豆所需依赖下载模型文件更改配置文件知识库创建测试知识助手命令行运行GradioUI界面测试本文是对书生大模型L2-茴香豆:企业级知识库问答工具部分......
  • 玩机进阶教程----MTK芯片杂牌机 小品牌机型以及其他mtk设备导出分区的另外一种方法解
            在前面多期博文中都是通过工具来导出分区制作线刷包的。今天我们以另外一种方法备份系统分区。mtk芯片较多。具体机型适合哪种方法需要自测。多种方法多条思路。遇到机型善用工具。目前一些wifi网卡 点读笔以及有些其他mtk芯片设备。通常分区都较小......