formData详细使用教程

更新日期: 2019-07-04阅读: 2.3k标签: FormData

formData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率


创建formData对象

 var formData=new FormData(form);
 // 通过append()方法追加数据
 formData.append("name","Lori");

FormData提供的方法

FormData.append()

  向 FormData 中添加新的属性值,如果FormData 对应的属性值存在则覆盖原值,否则新增一项属性值。

FormData.set()

给 FormData 设置属性值,如果FormData 对应的属性值存在则覆盖原值,否则新增一项属性值

FormData.get()

返回在 FormData 对象中与给定键关联的第一个值

FormData.getAll()

返回一个包含 FormData 对象中与给定键关联的所有值的数组。

FormData.delete():从FormData对象里面删除一个键值对

FormData.has()

返回一个布尔值表明 FormData 对象是否包含某些键

FormData.keys()

返回一个包含所有键的iterator对象

FormData.values()

返回一个包含所有值的iterator对象。

FormData.entries()

返回一个包含所有键值对的iterator对象


兼容性:


下面能我们就使用下面的例子来给大家演示一下怎么使用:


创建表单:

 <form id="userForm">
        <p>姓名:<input type="text" name="userNamee" value="李白"></p>
        <p>性别:<input type="radio" name="sex" value="male" checked>男
            <input type="radio" name="sex" value="female" >女
        </p>
        <p>城市:<select name="city">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">广州</option>
                <option value="4">深圳</option>
            </select></p>
        <p><input type="button" id="btn" value="添加"></p>
    </form>

操作方法

let btn = document.getElementById("btn");
        btn.onclick = function () {
            // 根据ID获得页面中的form表单元素
            var form = document.querySelector("#userForm");
            // 将获得的表单元素作为参数,对formData进行初始化
            var formData = new FormData(form);
            formData.append("name", "Lori");
            formData.append("name", "Jack");
            formData.append("gender", "Jacie");
            // 通过get方法只能读取第一个key为name的值
            console.log(formData.get("name")); // Lori
            // 通过getAll方法能获取到所有key为name的值
            console.log(formData.getAll("name")); //["Lori","Jack"]
            // 通过set修改数据,如果存在多个的话,就会改到只剩下一个key为name的值
            formData.set('name', "李白"); // ["李白"]
            // 如果不存在的话,就会添加一条数据
            formData.set('age', 30);
            console.log(formData.getAll('name'));
            console.log(formData.getAll('age'));
            // 通过delete方法删除key为gender的数据
            formData.delete("gender");
            console.log(formData.get('gender')); // null

            for (let keys of formData.keys()) {
                console.log(keys); // userName  sex city name age
            }

            for (let keys of formData.entries()) {
                console.log(keys); // ["userNamee", "李白"] ["sex", "male"] ["city", "1"] ["name", "李白"] ["age", "30"]
            }

            for (let keys of formData.values()) {
                console.log(keys);
            }
        }

文件上传

下面我们来做一个文件上传的例子:

创建表单
<form id="userForm">
        <p>姓名:<input type="text" name="userNamee" value="李白"></p>
        <p>性别:<input type="radio" name="sex" value="male" checked>男
            <input type="radio" name="sex" value="female">女
        </p>
        <p>城市:<select name="city">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">广州</option>
                <option value="4">深圳</option>
            </select></p>
        <p>
            头像:<input type="file" name="headImg"></p>
        </p>
        <p><input type="button" id="btn" value="添加"></p>
    </form>

发送数据
 let btn = document.getElementById("btn");
        btn.onclick = function () {
            
            var formdata=new FormData(document.getElementById("userForm"));
            var xhr = new XMLHttpRequest();
            xhr.open("post", "file.php");
        
            // 监听上传进度
            xhr.upload.onprogress=function(ev){
                let percent=(ev.loaded/ev.total)*100+'%';
                console.log(percent)
            }
            xhr.send(formdata);
        
            xhr.onload = function () {
                if (xhr.status == 200) {
                    //...
                }
            }

        }

来自:https://www.cnblogs.com/cythia/archive/2019/07/04/11133587.html


链接: https://www.fly63.com/article/detial/4020

ajax异步图片/文件上传的实现_利用FormData对象

在前后分离开发中,经常会遇到上传文件的情况,后端会有一个文件上传接口,通过ajax上传成功后返回图片地址url给前端。

FormData对象的使用

FormData类型是XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据提供便利。 作用:1.利用一些键值对来模拟一系列表单控件:即将form中的所有表单元素的name和value组装成一个queryString;2.异步上传二进制文件。

JSON对象转成formData对象,formData对象转成JSON对象

在向后端请求时,如果上传的数据里存在file文件对象,需要用到表单提交,这时候我们需要将JSON对象,转成formData对象,具体见代码 ;也可使用formData.entries()

form表单经常用到 serialize与new FormData

serialize()和new FormDate()javascript序列化表单的方法,所谓序列化表单就是讲form表单中所有name属性序列化成KEY-VALUE的形式,提交到后台,后台以对象相应的字段接收。

nodejs接收前端formData数据

很多时候需要利用formdata数据格式进行前后端交互。前端代码可以是如下所示:上面代码不仅有直接生成的formdata数据,还有利用append添加的。后端应该怎么接收?

formdata接口的用法详解

FormData接口提供了一种表示表单数据的键值对 name/value 的构造方式,能够将数据通过前端 Ajax 请求发送给后端。FormData的主要用途有两个。

formdata和json区别

Content-Type(内容类型),一般是指网页中存在的 Content-Type,用于定义网络文件的类型和网页的编码,决定浏览器将以什么形式、什么编码读取这个文件

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!