FormData用法笔记

1. 创建formData

<form id="form">
    <p><input name='title'>我是标题</input></p>
    <p>下拉菜单:
        <select name="select">
            <option value="1">111</option>
            <option value="2">222</option>
            <option value="3">333</option>
            <option value="4">444</option>
        </select>
    </p>
</form>

let formdata = new FormData()   // 通过formData构造函数创建一个空对象

let formdata = new FormData(document.querySelector('#form'))    // 获取页面时id值为form的表单，new FormData必须传入一个标签节点

// 表单中元素的name绑定的为当前表单元素的value值
console.log(formdata.get('title')) // 我是标题
console.log(formdata.get('select') // 111

2. 创建formData并传值

formdata.get('title')    // 获取Key为title的第一个元素的值、
formdata.getAll('title')    // 获取key为title的所有值，返回值为数组类型

fordata.append('name','yimi')    // 在formData对象中追加一个key为name值为yimi的键值对
console.log(formdata.get('name'))    // yimi
formdata.set('name','lala')    // 通过set方法更改key的value值，如果对象中没有name，则添加一个新的键值对。

3. formData的作用

        （1）将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。

        （2）异步上传文件