formdata_formdata 前端 - CSDN
精华内容
参与话题
  • FormData详解

    2018-08-31 16:20:00
    FormData类型其实是在XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利。 2. 构造函数 创建一个formData对象实例有几种方式 1、创建一个空对象实例 var ...

     

    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}

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

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

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

    3. 返回的对象的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);

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

    参考

    1. 兼容性查询

    2. MDN

    3. 《JavaScript高级程序设计》

    来源https://blog.csdn.net/hsany330/article/details/70156477

    展开全文
  • 一、js FormData方法介绍 1. 概述 FormData类型其实是在XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利。 2. 构造函数 创建一个formData对象实例有几种...

    一、js FormData方法介绍

    1. 概述

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

    2. 构造函数

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

    1、创建一个空对象实例

    var formData = new FormData();

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

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

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

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

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

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

    3. 操作方法

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

    3.1 获取值

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

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

    3.2 添加数据

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

    formData.append("k1", "v1");
    formData.append("k1", "v2");
    formData.append("k1", "v1");
    
    formData.get("k1"); // "v1"
    formData.getAll("k1"); // ["v1","v2","v1"]

    3.3 设置修改数据

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

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

    3.4 判断是否该数据

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

    formData.append("k1", "v1");
    formData.append("k2",null);
    
    formData.has("k1"); // true
    formData.has("k2"); // true
    formData.has("k3"); // false

    3.5 删除数据

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

    formData.append("k1", "v1");
    formData.append("k1", "v2");
    formData.append("k1", "v1");
    formData.delete("k1");
    
    formData.getAll("k1"); // []

    3.6 遍历

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

    formData.append("k1", "v1");
    formData.append("k1", "v2");
    formData.append("k2", "v1");
    
    var i = formData.entries();
    
    i.next(); // {done:false, value:["k1", "v1"]}
    i.next(); // {done:fase, value:["k1", "v2"]}
    i.next(); // {done:fase, value:["k2", "v1"]}
    i.next(); // {done:true, value:undefined}

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

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

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

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

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

    formData.append("k1", "v1");
    formData.append("k1", "v2");
    formData.append("k2", "v1");
    
    var i = formData.entries();
    
    i.next(); // {done:false, value:"v1"}
    i.next(); // {done:fase, value:"v2"}
    i.next(); // {done:fase, value:"v1"}
    i.next(); // {done:true, value:undefined}

    4. 发送数据

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

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

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

     

    二、FormData的实践

    1、概述

    FormData 对象的使用:
    1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成
    一个queryString
    2. 异步上传二进制文件。

    2、使用

    1.FormData对象的操作方法,全部在原型中,自己本身没任何的属性及方法。

    let formData = new FormData()
    formData.append('user', 'zhang')
    获取 formData.get('user')  //zhang
    删除 formData.delete('user')
    .....

    2.使用FormData对象发送文件

    HTML部分
    <form action="">
    	<label for="">
    		姓名: <input type="text" name="name">
    	</label>
    	<label for="">
    		文件:<input id="file" type="file" name="file">
    	</label>
    	<label for="">
    		<input type="button" value="保存">
    	</label>
    </form>
    JS部分
    var btn = document.querySelector('[type=button]');
    btn.onclick = function () {
        // 文件元素
        var file = document.querySelector('[type=file]');
        // 通过FormData将文件转成二进制数据
        var formData = new FormData();
        // 将文件转二进制
        *****注意2******
        formData.append('upload', file.files[0]);
        *****注意1******
        var xhr = new XMLHttpRequest;
        xhr.open('post', 'file.php');
        // 监听上传进度
        xhr.upload.onprogress = function (ev) {
        // 事件对象
        // console.log(ev);
            var percent = (ev.loaded / ev.total) * 100 + '%';
            console.log(percent);
            progress.style.width = percent;
        }
    
        xhr.send(formData);
        xhr.onreadystatechange = function () {
                if(xhr.readyState == 4 && xhr.status == 200) {
                        //
                }
        }
    }

     

    注意1:使用jQuery

     $.ajax({
        url: 'file.php',
        type: 'POST',
        data: formdata,                    // 上传formdata封装的数据
        dataType: 'JSON',
        cache: false,                      // 不缓存
        processData: false,                // jQuery不要去处理发送的数据
        contentType: false,                // jQuery不要去设置Content-Type请求头
        success:function (data) {           //成功回调
            console.log(data);
        }
    });

     

    注意2:参数

    new FormData的参数是一个DOM对象,而非jQuery对象

    var formData = new FormData($("#file")[0]);

    3、jQuery的参数序列化方法serialize()

    序列表表格内容为字符串,用于 Ajax 请求。 

    $("form").serialize()

    三、补充:关于XMLHttpRequest 对象

    XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应,并且能够以文本或者一个 DOM 文档的形式返回内容。

    尽管名为 XMLHttpRequest,它并不限于和 XML 文档一起使用:它可以接收任何形式的文本文档。

    属性

    readyState 
    HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时,这个属性的值从 0 开始,直到接收到完整的 HTTP 响应,这个值增加到 4。

    5 个状态中每一个都有一个相关联的非正式的名称,下表列出了状态、名称和含义:

    状态 名称 属性
    0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
    1 Open open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。
    2 Sent Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。
    3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
    4 Loaded HTTP 响应已经完全接收。


    readyState 的值不会递减,除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增加的时候,都会触发 onreadystatechange 回调函数。

    responseText 
    目前为止为服务器接收到的响应体(不包括头部),或者如果还没有接收到数据的话,就是空字符串。

    如果 readyState 小于 3,这个属性就是一个空字符串。当 readyState 为 3,这个属性返回目前已经接收的响应部分。如果 readyState 为 4,这个属性保存了完整的响应体。

    如果响应包含了为响应体指定字符编码的头部,就使用该编码。否则,假定使用 Unicode UTF-8。

    responseXML 
    对请求的响应,解析为 XML 并作为 Document 对象返回。

    status 
    由服务器返回的 HTTP 状态代码,如 200 表示成功,而 404 表示 “Not Found” 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。

    statusText 
    这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说,当状态为 200 的时候它是 “OK”,当状态为 404 的时候它是 “Not Found”。和 status 属性一样,当 readyState 小于 3 的时候读取这一属性会导致一个异常。

    timeout 
    超时时间,毫秒数。

    方法

    abort() 
    取消当前响应,关闭连接并且结束任何未决的网络活动。

    这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态,并且取消所有未决的网络活动。例如,如果请求用了太长时间,而且响应不再必要的时候,可以调用这个方法。

    getAllResponseHeaders() 
    把 HTTP 响应头部作为未解析的字符串返回。

    如果 readyState 小于 3,这个方法返回 null。否则,它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回,一行一个头部。每行用换行符 “\r\n” 隔开。

    getResponseHeader() 
    返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字,和响应头部的比较是不区分大小写的。

    该方法的返回值是指定的 HTTP 响应头部的值,如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部,这个头部的值被连接起来并返回,使用逗号和空格分隔开各个头部的值。

    open() 
    初始化 HTTP 请求参数,例如 URL 和 HTTP 方法,但是并不发送请求。

    send() 
    发送 HTTP 请求,使用传递给 open() 方法的参数,以及传递给该方法的可选请求体。

    setRequestHeader() 
    向一个打开但未发送的请求设置或添加一个 HTTP 请求。

    事件监听

    4个事件:分别是progress(加载进度),load(请求完成并接受到服务器返回结果),error(请求错误),abort(终止请求)。 
    代码:

    var oReq = new XMLHttpRequest();
    
    oReq.upload.addEventListener("progress", updateProgress);
    oReq.upload.addEventListener("load", transferComplete);
    oReq.upload.addEventListener("error", transferFailed);
    oReq.upload.addEventListener("abort", transferCanceled);
    
    oReq.open();

    参考文档:

    https://www.cnblogs.com/fps2tao/p/9760676.html

    https://www.cnblogs.com/gczmn/p/9437935.html

    https://blog.csdn.net/wang704987562/article/details/81045818

    展开全文
  • FormData实现文件上传(前端 后端)部分代码 FormData实现文件上传(前端 后端) 工具类代码
  • HTML5 FormData 方法介绍以及实现文件上传

    万次阅读 多人点赞 2016-08-30 21:52:25
    本文介绍了 XMLHttpRequest Level 2 中的 FormData 接口,利用 FormData 我们可以轻松的实现文件上传,FormData 对象还有一些实用的方法,本文也对其一一进行了解释。

    XMLHttpRequest 是一个浏览器接口,通过它,我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月,XMLHttpRequest Level 2 草案提出来了,相对于上一代,它有一些新的特性,其中 FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,当然最大的优势就是可以上传二进制文件。下面就具体介绍一下如何利用 FormData 来上传文件。

    FormData 上传文件实例

    首先看一下formData的基本用法:FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可:

    var form = document.getElementById("form1");
    var fd = new FormData(form);

    这样就可以直接通过ajax 的 send() 方法将 fd 发送到后台。

    以下创建了一个表单 form,表单中除了普通的数据外,还有文件上传,我们直接将 form对象作为参数传入FormData对象:

    <form name="form1" id="form1">  
            <p>name:<input type="text" name="name" /></p>  
            <p>gender:<input type="radio" name="gender" value="1" />male <input type="radio" name="gender" value="2" />female</p>
            <p>stu-number:<input type="text" name="number" /></p>  
            <p>photo:<input type="file" name="photo" id="photo"></p>  
            <p><input type="button" name="b1" value="submit" onclick="fsubmit()" /></p>  
    </form>  
    <div id="result"></div>

    上述代码创建一个form,简单的填写一些信息,以及选择一张图片作为头像,设置一个div来存放返回的结果。

    这里写图片描述

    为了简便,我们还是采用jquery封装的ajax来向后台传输数据:

    function fsubmit() {
            var form=document.getElementById("form1");
            var fd =new FormData(form);
            $.ajax({
                 url: "server.php",
                 type: "POST",
                 data: fd,
                 processData: false,  // 告诉jQuery不要去处理发送的数据
                 contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
                 success: function(response,status,xhr){
                    console.log(xhr);
                    var json=$.parseJSON(response);
                    var result = '';
                    result +="个人信息:<br/>name:"+json['name']+"<br/>gender:"+json['gender']+"<br/>number:"+json['number'];
                     result += '<br/>头像:<img src="' + json['photo'] + '" height="100" style="border-radius: 50%;" />';
                     $('#result').html(result);
                 }
            });
            return false;
        }
    

    上述代码中的 server.php 是服务器端的文件,接收ajax请求,并将接收结果返回,具体代码如下:

    <?php
    
    $name = isset($_POST['name'])? $_POST['name'] : '';  
    $gender = isset($_POST['gender'])? $_POST['gender'] : '';
    $number = isset($_POST['number'])? $_POST['number'] : '';  
    $filename = time().substr($_FILES['photo']['name'], strrpos($_FILES['photo']['name'],'.'));  
    $response = array();
    
    if(move_uploaded_file($_FILES['photo']['tmp_name'], $filename)){  
        $response['isSuccess'] = true;  
        $response['name'] = $name;  
        $response['gender'] = $gender;
        $response['number'] = $number;  
        $response['photo'] = $filename;  
    }else{  
        $response['isSuccess'] = false;  
    }  
    echo json_encode($response);
    
    ?>
    

    填写好信息后,点击 submit,页面中能得到以下效果,去服务器端对应的文件夹下也能发现上传的图片。

    这里写图片描述

    如果你是原生 JavaScript 爱好者,当然一样能实现以上功能,下面是简单的JavaScript实现代码:

    function fsubmit() {
        var form=document.getElementById("form1");
        var formData=new FormData(form);
        alert(formData.name);
        var oReq = new XMLHttpRequest();
        oReq.onreadystatechange=function(){
          if(oReq.readyState==4){
            if(oReq.status==200){
                console.log(typeof oReq.responseText);
                var json=JSON.parse(oReq.responseText);
                var result = '';
                result +="个人信息:<br/>name:"+json['name']+"<br/>gender:"+json['gender']+"<br/>number:"+json['number'];
                 result += '<br/>头像:<img src="' + json['photo'] + '" height="50" style="border-radius: 50%;" />';
    
                 $('#result').html(result);
            }
          }
        };
        oReq.open("POST", "server.php");
        oReq.send(formData); 
        return false;
    }

    FormData 对象方法介绍

    FormData 除了上面的创建新对象时直接将 form 作为参数传入外,还有其他的功能。网上大部分关于 FormData 介绍的文章都只提到了append()方法,那么FormData 对象到底有些什么方法呢?我们console 一下就知道:

    这里写图片描述

    console 之后我们有重大的发现,FormData 对象竟然有这么方法,所以还是自己测试才能发现真相,下面就对这些方法一一进行讲解:

    1、append()

    append()方法用于向 FormData 对象中添加键值对:

    fd.append('key1',"value1");
    fd.append('key2',"value2");

    fd是 FormData 对象,可以新建的空的对象,也可以是已经包含 form 表单或其他键值对。

    2、set()

    设置对应的键 key 对应的值 value(s)

    fd.set('key1',"value1");
    fd.set('key2',"value2");

    看起来跟append() 方法有点类似,这两者的区别就是,当指定的 key 值存在时,append()方法是将新增的添加的所以的键值对最后,而set()方法将会覆盖前面的设置的键值对。还是通过实例来对比,我们在前面的 form 的基础上 append() 或 set() 新的键值对:

    fd.append('name',"will");

    有两个key为name的键值对:
    这里写图片描述

    fd.set('name',"will");

    只有一个key为name的键值对:
    这里写图片描述

    以上就是 append() 和 set() 的区别。如果设置的key值不存在,那么两者的效果是一样的。

    3、delete()

    接收一个参数,表示你要删除的 key 值的名字,如果有多个相同 key 值,会一并删除:

    fd.append('name','will');
    fd.delete('name');

    form 中的 name 信息以及通过append() 新增的name 的信息都被删除了。

    4、get() 和 getAll()

    接收一个参数,表示需要查找的 key 的名称,返回第一个该 key 对应的 value 值。如果有多个相同的 key, 而且要返回所有的这个 key 对应的 value 值。

    同样以上面的 form 表单为基础:

    fd.append('name','will');
    console.log(fd.get('name')); // sean
    fd.append('name','will');
    console.log(fd.getAll('name')); // ["sean", "will"]

    5、has()

    该方法也接收一个参数,同样是 key 的名称,返回一个Boolean 值, 用来判断FormData 对象是否含有该 key。以上面的form为例:

    console.log(fd.has('name')); // true
    console.log(fd.has('Name')); // false

    6、keys()

    该方法不需要接收参数,返回一个迭代器,通过这个迭代器,我们可以遍历FormData 对象中所有的 key。以上面的form为例:

    for (var key of fd.keys()) {
               console.log(key); 
            }

    结果为:

    name
    gender
    number
    photo

    7、values()

    有遍历 key 的迭代,当然也就少不了遍历 value 的迭代器了。values()就是遍历value 的迭代器,用法与 keys() 类似:

    for (var value of fd.values()) {
               console.log(value); 
            }

    结果:

    这里写图片描述

    8、entries()

    有遍历 key 的迭代器,也有遍历 value 的迭代器,为何不搞一个两者一起的呢!entries()就是返回一个包含键值对的迭代器:

    for(var pair of fd.entries()) {
               console.log(pair[0]+ ', '+ pair[1]); 
            }

    结果:

    这里写图片描述

    FormData兼容性问题

    由于 FormData 是 XMLHttpRequest Level 2 新增的接口,现在 低于IE10 的IE浏览器不支持 FormData ,至于 上面介绍的 FormData 对象的方法经过测试,在 IE 浏览器中都不支持,具体的各大浏览器的支持情况可以参照下图:

    这里写图片描述

    展开全文
  • FormData用法详解

    万次阅读 2018-03-21 09:50:03
    FormData 对象: 一.创建一个formData对象实例的方式 1、创建一个空对象 var formData = new FormData();//通过append方法添加数据 2、使用已有表单来初始化对象 //表单示例 &lt;form id="myForm&...

    FormData 对象:
    formdata

    一.创建一个formData对象实例的方式

    1、创建一个空对象

    var formData = new FormData();//通过append方法添加数据

    2、使用已有表单来初始化对象

    //表单示例
    <form id="myForm" action="" method="post">
        <input type="text" name="name">名字
        <input type="password" name="psw">密码
        <input type="submit" value="提交">
    </form>
    
    //方法示例
    // 获取页面已有的一个form表单
    var form = document.getElementById("myForm");
    // 用表单来初始化
    var formData = new FormData(form);
    // 我们可以根据name来访问表单中的字段
    var name = formData.get("name"); // 获取名字
    var psw = formData.get("psw"); // 获取密码
    // 当然也可以在此基础上,添加其他数据
    formData.append("token","kshdfiwi3rh");

    二. 操作方法

    formData里面存储的数据是以健值对的形式存在的,key是唯一的,一个key可能对应多个value。
    如果是使用表单初始化,每一个表单字段对应一条数据,它们的HTML name属性即为key值,它们value属性对应value值。
    1.获取值

    //通过get(key)/getAll(key)来获取对应的value
    formData.get("name"); // 获取key为name的第一个值
    formData.get("name"); // 返回一个数组,获取key为name的所有值

    2 添加数据

    //通过append(key, value)来添加数据,如果指定的key不存在则会新增一条数据,如果key存在,则添加到数据的末尾
    formData.append("k1", "v1");
    formData.append("k1", "v2");
    formData.append("k1", "v3");

    获取值时方式及结果如下

    formData.get("k1"); // "v1"
    formData.getAll("k1"); // ["v1","v2","v3"]

    3.设置修改数据

    //set(key, value)来设置修改数据,如果指定的key不存在则会新增一条,如果存在,则会修改对应的value值
    formData.append("k1", "v1");
    formData.set("k1", "1");
    formData.getAll("k1"); // ["1"]

    4.判断是否存在对应数据

    //has(key)来判断是否对应的key值
    formData.append("k1", "v1");
    formData.append("k2",null);
    
    formData.has("k1"); // true
    formData.has("k2"); // true
    formData.has("k3"); // false

    5.删除数据

    //delete(key)删除数据
    formData.append("k1", "v1");
    formData.append("k1", "v2");
    formData.append("k1", "v1");
    formData.delete("k1");
    
    formData.getAll("k1"); // []

    三.JQuery实例

    //添加数据方式见上二。
    //processData: false, contentType: false,多用来处理异步上传二进制文件。
     $.ajax({
        url: 'xxx',
        type: 'POST',
        data: formData,                    // 上传formdata封装的数据
        dataType: 'JSON',
        cache: false,                      // 不缓存
        processData: false,                // jQuery不要去处理发送的数据
        contentType: false,                // jQuery不要去设置Content-Type请求头
        success:function (data) {           //成功回调
            console.log(data);
        }
    });

    附:

    /**
     * 将以base64的图片url数据转换为Blob文件格式
     * @param urlData 用url方式表示的base64图片
     */
    function convertBase64UrlToBlob(urlData) {
        var bytes = window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte
        //处理异常,将ascii码小于0的转换为大于0
        var ab = new ArrayBuffer(bytes.length);
        var ia = new Uint8Array(ab);
        for(var i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }
        return new Blob([ab], {
            type: 'image/png'
        });
    }

    内容摘自https://segmentfault.com/a/1190000006716454

    展开全文
  • 关于FormData详解

    千次阅读 2018-08-07 10:55:08
    FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(key data),而独立于表单使用。如果表单enctype属性设为multipart/form-data ,则会使用...
  • web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一些html浪费带宽...
  • FormData数据格式

    万次阅读 2019-10-12 17:55:29
    **FormData数据格式**介绍实现方法1实现方法2安装使用总结 介绍 由于后端接口请求对格式有要求,一些情况需要用到FormData的格式。 实现方法1 var params = new FormData(); params.append('item_link',...
  • FormData

    2019-12-26 18:44:03
    容器
  • formdata后台接收数据

    万次阅读 2018-03-13 18:03:33
    名称由后端定义的,这样来接参多文件就用数组,问题解决,完美!!!
  • FormData添加数组

    万次阅读 2018-08-17 10:46:02
    把数组直接append到FormData对象中,post的请求会把数组拼接成一个字符串发送给服务器,又不想在服务器端截取字符串。 解决方案:遍历数组把数组项依次append添加到FormData对象,服务器端就可以获取数组了。 ...
  • 一、创建FormData的方法通常有两种: 1、 创建一个空的formData对象 let formData = new FormData(); 2、通过HTML表单元素创建FormData对象 let formData = new FormData(someFormElement);   二、FromData...
  • html5 new FormData() 是空的(释疑)

    万次阅读 2019-11-29 10:53:27
    html5 new FormData() 没有数据,获取不到数据,前台发送数据结合后台接收,如果可以接收... var formData = new FormData(); formData.append(&amp;quot;photo&amp;quot;,$(&amp;quot;#photo&amp;quot;
  • formData传数组作为参数

    万次阅读 2019-02-21 19:48:03
    const formData = new FormData() let arr=[{a:1,c:3},{a:2,c:4}]; for(let i=0;i&lt;arr.length;i++){ for(let key in arr[i]){ //假设这个数组对应的字段为box formData.append(`box[${i}][${key}]`,arr[i]...
  • axios配置后,post提交formdata

    万次阅读 2018-01-19 13:27:35
    var fd = new FormData() fd.append('file', files[0]) let config = { headers: { 'Content-Type': 'multipart/form-data' } } axios.post(that.uploadUrl, fd,config).then( res => { console.
  • FormData兼容性问题

    万次阅读 2018-12-19 12:08:00
    在使用FormData提交表单的过程中,原本这个是非常的实用的,但是在IE下,我发现表单提交一直报错。 开始我以为是提交的方法不行,但是找了好久之后,突然发现,其实是IE完全不支持formData.get()方法,不管哪个...
  • Json转FormData 格式

    万次阅读 2017-12-08 11:25:05
    将json转成Content-Type:multipart/form-data;  let form = new FormData();  form.append("param", JSON.stringify(params));
  • formData看不到数据的原因

    千次阅读 2019-07-16 09:27:39
    var fileObj = document.getElementById("file")....var form1 = new FormData(); // FormData 对象 form1.append("file", fileObj); // 文件对象 console.log(form1) 最后输出的是空的formData对象,看不到...
  • 在向后端请求时,如果上传的数据里存在file文件对象,需要用到表单提交,这时候我们需要将JSON对象,转成formData对象,具体见代码 Object.keys(params).forEach((key) =&amp;amp;amp;gt; { formData.append...
  • IE浏览器控制台报:SCRIPT5009: “FormData”未定义 ,但是火狐、谷歌、360浏览器都没事,哪个大神给解决一下
1 2 3 4 5 ... 20
收藏数 40,653
精华内容 16,261
关键字:

formdata