欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

formData详细使用教程

程序员文章站 2022-06-27 21:58:20
formData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率 创建formData对象 FormData提供的方法 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对象

兼容性:

formData详细使用教程

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

创建表单:

 <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) {
                    //...
                }
            }

        }