formData对象

最新推荐文章于 2024-06-10 16:58:43 发布

qq小小布丁

最新推荐文章于 2024-06-10 16:58:43 发布

阅读量1.2k

点赞数

分类专栏： javascript 文章标签：对象

本文链接：https://blog.csdn.net/u012841667/article/details/78310300

版权

javascript 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

formData对象用于组装表单数据，以键值对的形式存在。
方法
1、append()往值集中新增值

append(name, value, file)
append(name, value)

value可以是string，Blob，File，可以使用同一个名称添加多个值。
当一个 Blob 或 File 被作为第二个参数的时候， Blob 对象的默认文件名是 “blob”。 File 对象的默认文件名是该文件的名称。如果你指定一个 Blob 作为数据添加到 FormData 对象中，文件名会被放在 “Content-Disposition” 头部（常常会根据浏览器变化而变化）传给服务器。

2、set()
如果没有新增一个键值，如果有则替换，而append是追加

formData.set(name, value);
formData.set(name, value, filename);

3、delete()

var formData = new FormData(myform);
formData.delete(name);

4、entries()
返回一个迭代器

var formData = new FormData(myform);
var pairs = formData.entries();
for(var pair of pairs) {
   console.log(pair[0]+ ', '+ pair[1]); 
}

5、get()
返回FormData对象中和指定的键关联的第一个值

var formData = new FormData();
formData.append('name', 'liyongfen');
formData.append('username', 'Chris');
formData.append('username', 'Bob');
var name = formData.get('name');//liyongfen

6、getAll()
返回和指定键关联的全部值

var formData = new FormData();
formData.append('name', 'liyongfen');
formData.append('username', 'Chris');
formData.append('username', 'Bob');
var name = formData.get('name');//['liyongfen','Chris','Bob']

7、has()
返回一个布尔值，表示该FormData对象是否含有某个key

// 先创建一个 FormData 对象
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
// 输出所有的 key
for (var key of formData.keys()) {
   console.log(key); 
}

8、values()
返回一个允许遍历该对象中所有值的迭代器

//创建一个FormData测试对象
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
//显示值
for (var value of formData.values()) {
   console.log(value); 
}

总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>formdata</title>
</head>
<body>
<form id="myform">
    <input type="text" name="name" value="liyongen" />
    <input type="file" name="files" multiple />
    <textarea name="info"></textarea>
    <input type="date" name="time" />
    <button type="button" id="btn">按钮</button>
</form>
<script type="text/javascript">
    var btn = document.getElementById('btn');
    btn.onclick = function(e){
        var myform = document.getElementById('myform');
            formdata = new FormData(myform);
        //add update
        formdata.append('name','shaozejun');
        formdata.set('name','shaozejun2');  
        console.log(formdata.getAll('name'));
        //del
        formdata.delete('time');
        //look
        console.log(formdata.has('names'));
        console.log(formdata.getAll('name'));
        console.log(formdata.get('name'));

        //for
        for(var key of formdata.entries()){
            console.log(key[0],key[1]);
        }
        for(var key of formdata.values()){
            console.log(key);
        }
        for(var key of formdata.keys()){
            console.log(key);
        }
    }
</script>
</body>
</html>

qq小小布丁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
formData对象

formData对象用于组装表单数据，以键值对的形式存在。方法 1、append()往值集中新增值append(name, value, file)append(name, value)value可以是string，Blob，File，可以使用同一个名称添加多个值。当一个 Blob 或 File 被作为第二个参数的时候， Blob 对象的默认文件名是 “blob”。 File 对象的默认
复制链接

扫一扫

专栏目录