FormData 详解 另附上例子

于 2018-06-29 10:59:35 发布
阅读量844 收藏
点赞数

FormData

1. 概述

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

2. 构造函数

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

1、创建一个空对象实例

var formData = new FormData();

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

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

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


   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <form id="myForm" action="" method="post">
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
        
       
       <input type="text" name="name">名字
      
      
    
     
     
  3. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
        
       
       <input type="password" name="psw">密码
      
      
    
     
     
  4. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
        
       
       <input type="submit" value="提交">
      
      
    
     
     
  5. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       </form>

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


   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       // 获取页面已有的一个form表单
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       var form = 
       
       document.getElementById(
       
       "myForm");
      
      
    
     
     
  3. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       // 用表单来初始化
      
      
    
     
     
  4. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       var formData = 
       
       new FormData(form);
      
      
    
     
     
  5. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       // 我们可以根据name来访问表单中的字段
      
      
    
     
     
  6. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       var name = formData.get(
       
       "name"); 
       
       // 获取名字
      
      
    
     
     
  7. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       var psw = formData.get(
       
       "psw"); 
       
       // 获取密码
      
      
    
     
     
  8. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       // 当然也可以在此基础上，添加其他数据
      
      
    
     
     
  9. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.append(
       
       "token",
       
       "kshdfiwi3rh");

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，


   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.get(
       
       "name"); 
       
       // 获取key为name的第一个值
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.get(
       
       "name"); 
       
       // 返回一个数组，获取key为name的所有值

3.2 添加数据

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


   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.append(
       
       "k1", 
       
       "v1");
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.append(
       
       "k1", 
       
       "v2");
      
      
    
     
     
  3. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.append(
       
       "k1", 
       
       "v1");
      
      
    
     
     
  4. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
     
      
      
    
     
     
  5. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.get(
       
       "k1"); 
       
       // "v1"
      
      
    
     
     
  6. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.getAll(
       
       "k1"); 
       
       // ["v1","v2","v1"]

3.3 设置修改数据

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


   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.append(
       
       "k1", 
       
       "v1");
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.set(
       
       "k1", 
       
       "1");
      
      
    
     
     
  3. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.getAll(
       
       "k1"); 
       
       // ["1"]

3.4 判断是否该数据

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


   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.append(
       
       "k1", 
       
       "v1");
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.append(
       
       "k2",
       
       null);
      
      
    
     
     
  3. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
     
      
      
    
     
     
  4. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.has(
       
       "k1"); 
       
       // true
      
      
    
     
     
  5. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.has(
       
       "k2"); 
       
       // true
      
      
    
     
     
  6. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.has(
       
       "k3"); 
       
       // false

3.5 删除数据

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


   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.append(
       
       "k1", 
       
       "v1");
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.append(
       
       "k1", 
       
       "v2");
      
      
    
     
     
  3. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.append(
       
       "k1", 
       
       "v1");
      
      
    
     
     
  4. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.delete(
       
       "k1");
      
      
    
     
     
  5. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
     
      
      
    
     
     
  6. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.getAll(
       
       "k1"); 
       
       // []

3.6 遍历

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


   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.append(
       
       "k1", 
       
       "v1");
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.append(
       
       "k1", 
       
       "v2");
      
      
    
     
     
  3. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       formData.append(
       
       "k2", 
       
       "v1");
      
      
    
     
     
  4. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
     
      
      
    
     
     
  5. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       var i = formData.entries();
      
      
    
     
     
  6. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
     
      
      
    
     
     
  7. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       i.next(); 
       
       // {done:false, value:["k1", "v1"]}
      
      
    
     
     
  8. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       i.next(); 
       
       // {done:fase, value:["k1", "v2"]}
      
      
    
     
     
  9. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       i.next(); 
       
       // {done:fase, value:["k2", "v1"]}
      
      
    
     
     
  10. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       i.next(); 
       
       // {done:true, value:undefined}

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

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

  • 返回的是一个对象，当其done属性为true时，说明已经遍历完所有的数据，这个也可以作为判断的依据

  • 返回的对象的value属性以数组形式存储了一对key/value，数组下标0为key，下标1为value，如果一个key值对应多个value，会变成多对key/value返回


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

    
   
   
    1. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
       formData.append(
       
       "k1", 
       
       "v1");
      
      
      
     
     
    2. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
       formData.append(
       
       "k1", 
       
       "v2");
      
      
      
     
     
    3. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
       formData.append(
       
       "k2", 
       
       "v1");
      
      
      
     
     
    4. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
       
      
      
      
     
     
    5. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
       var i = formData.entries();
      
      
      
     
     
    6. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
       
      
      
      
     
     
    7. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
       i.next(); 
       
       // {done:false, value:"v1"}
      
      
      
     
     
    8. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
       i.next(); 
       
       // {done:fase, value:"v2"}
      
      
      
     
     
    9. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
       i.next(); 
       
       // {done:fase, value:"v1"}
      
      
      
     
     
    10. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
       i.next(); 
       
       // {done:true, value:undefined}

    4. 发送数据

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

    
   
   
    1. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
       var xhr = 
       
       new XMLHttpRequest();
      
      
      
     
     
    2. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
       xhr.open(
       
       "post",
       
       "login");
      
      
      
     
     
    3. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
       xhr.setRequestHeader(
       
       "Content-Type",
       
       "application/x-www-form-urlencoded");
      
      
      
     
     
    4. 
     
     
      
      
      
      
     
     
      
     
     
      
      
      
      
       
       xhr.send(formData);

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

            </div>
            </div>

    文章注明出处：https://blog.youkuaiyun.com/yezitoo/article/details/78339201
    另附上一个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>
gang456789
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值