formatter 如何处理数组换行 element formdata数组对象

转载

mob64ca14005461 2024-04-06 10:00:36

文章标签 Data 数据表单 文章分类 机器学习人工智能

FormData

1. 概述

FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。

2. 构造函数

创建一个formData对象实例有几种方式

1、创建一个空对象实例

var formData = new FormData();

此时可以调用append()方法来添加数据

2、使用已有的表单来初始化一个对象实例

假如现在页面已经有一个表单

我们可以使用这个表单元素作为初始化参数，来实例化一个formData对象

3. 操作方法

首先，我们要明确formData里面存储的数据形式，一对key/value组成一条数据，key是唯一的，一个key可能对应多个value。如果是使用表单初始化，每一个表单字段对应一条数据，它们的HTML name属性即为key值，它们value属性对应value值。

key	value
k1	[v1,v2,v3]
k2	v4

3.1 获取值

我们可以通过get(key)/getAll(key)来获取对应的value，

3.2 添加数据

我们可以通过append(key, value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾

3.3 设置修改数据

我们可以通过set(key, value)来设置修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值。

3.4 判断是否该数据

我们可以通过has(key)来判断是否对应的key值

3.5 删除数据

通过delete(key)，来删除数据

3.6 遍历

我们可以通过entries()来获取一个迭代器，然后遍历所有的数据，

可以看到返回迭代器的规则

每调用一次next()返回一条数据，数据的顺序由添加的顺序决定

返回的是一个对象，当其done属性为true时，说明已经遍历完所有的数据，这个也可以作为判断的依据
返回的对象的value属性以数组形式存储了一对key/value，数组下标0为key，下标1为value，如果一个key值对应多个value，会变成多对key/value返回

我们也可以通过values()方法只获取value值

4. 发送数据

我们可以通过xhr来发送数据

这种方式可以来实现文件的异步上传。

</div>
            </div>

文章注明出处：
另附上一个demo

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<head>
    <title>图片上传</title>
    <script src="../public/jquery-1.9.1.min.js"></script>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        #ssss{
            width: 75px;
            height: 75px;
            margin: 0 auto;
            position: relative
        }
        #dddd{
            height: 75px;
            width: 100%;
        }
        #upLoadImg,#loadfileclick{
            width: 75px;
            height: 75px;
            text-align: center;
            border-radius: 50%;
        }
        #upLoadImg{
            position: absolute;
            float: left;
            width: 100%;
            height: 100%;
            border: 1px solid #ccc;
        }
        #loadfileclick{
            position: absolute;
            opacity: 0;
        }
    </style>
</head>

<body>
    <div id="dddd">
        <div id="ssss">
            <img src="" alt="" id="upLoadImg">
            <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" id="loadfileclick">
        </div>
    </div>
</body>
<script>
    $(function(){
        $("#loadfileclick").change(function(e){
            loadFile(e)
        })
        function loadFile(e){
            var imgurl;
            var file = e.target.files[0] || e.dataTransfer.files[0];
             if (!/image\/\w+/.test(file.type)) {
                alert("只能选择图片");
                return false;
            }
            var reader = new FileReader();
            // 提交数据到后台
            var oMyForm = new FormData();
            oMyForm.append("file", file);
            $.ajax({  
                url: 'http://XXXX.htm',  
                type: 'POST',  
                cache: false,  
                data: oMyForm,  
                processData: false,  
                contentType: false  
            }).done(function(res) {
                $("#upLoadImg").attr('src', res.url); 
            });
            reader.onload = (e) => {
              console.log(e);
              console.log(e.target.result)
            };
            reader.readAsDataURL(file);
        }
    })
</script>
</html>