H5 FormData 详解

FormData简介

  1. FormData 是 Html5 新加进来的一个类,可以模拟表单数据
  2. 利用 FormData 对象,可以通过JavaScript键值对来模拟一系列表单控件
  3. 可以使用 JQuery 的 $.Ajax 结合 FormData 异步上传二进制文件
  4. 可以先通过 new 关键字创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段(字段的值可以是一个 File对象或者字符串,剩下其他类型的值都会被自动转换成字符串)
  5. 也可以 new 的同时直接传入表单对象,从而创建有值的FormData对象

构造器

构造函数 解释
FormData (optional HTMLFormElement form) (可选) 一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,BootCDN官网地址:http://www.bootcdn.cn/-->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $("#refresh").click(function () {
                /**新建空的 FormData 对象*/
                let formData1 = new FormData();
                formData1.append("name", "华安");
                console.log(formData1.has("name") + ":" + formData1.get("name"));//输出:true:华安

                /**根据表单创建 FormData 对象,注意构造器参数是DOM对象,而不是JQuery对象*/
                let formData2 = new FormData($("#form")[0]);
                console.log(formData2.get("name"));//默认输出:请输入姓名...
                console.log(formData2.get("age"));//默认输出:0
                console.log(formData2.get("info"));//默认输出:请输入描述...
                console.log(formData2.get("address"));//因为不存在,所以输出:null
            });
        });
    </script>
</head>
<body>
<button id="refresh">刷新</button>
<form id="form" method="post">
    姓名:<input type="text" name="name" value="请输入姓名...">
    年龄:<input type="number" name="age" value="0">
    描述:<textarea name="info">请输入描述...</textarea>
</form>
</body>
</html>

方 法

添加数据

  • 通过append(key, value)来添加数据,如果指定的key不存在则会新增一条数据,如果key存在,则添加到数据的末尾
void append(DOMString name, DOMString value)
name 表单元素名称,已经存在时,以数组形式追加值
value 表单元素要传递的值

获取数据

  • 可以通过 get(key)、getAll(key) 来获取对应的 value
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,BootCDN官网地址:http://www.bootcdn.cn/-->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $("#refresh").click(function () {
                let formData = new FormData();
                formData.append("name", "华安");
                formData.append("number", 9527);
                formData.append("name", "宁王");
                console.log(formData.get("name"));//默认取第一个,输出:华安
                console.log(formData.get("number"));//输出:9527
                console.log(formData.getAll("name"));//输出:["华安", "宁王"]
                console.log(formData.getAll("name")[0]);//输出:华安
                console.log(formData.getAll("name")[1]);//输出:宁王
            });
        });
    </script>
</head>
<body>
<button id="refresh">刷新</button>
</body>
</html>

修改数据

  • 可以通过 set(key, value) 来设置修改数据,如果指定的 key 不存在则会新增一条,如果存在,则会修改对应的value值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,BootCDN官网地址:http://www.bootcdn.cn/-->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $("#refresh").click(function () {
                let formData = new FormData();
                formData.append("name", "华安");
                console.log(formData.get("name"));//输出:华安
                formData.set("name", "宁王");
                console.log(formData.get("name"));//输出:宁王
                formData.set("age", 35);
                console.log(formData.get("age"));//输出:35
            });
        });
    </script>
</head>
<body>
<button id="refresh">刷新</button>
</body>
</html>

判断是否含有指定key

  • 可以通过 has(key) 来判断是否对应的 key 值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,BootCDN官网地址:http://www.bootcdn.cn/-->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $("#refresh").click(function () {
                let formData = new FormData();
                formData.append("name", "华安");
                console.log(formData.has("name")+":"+formData.get("name"));//输出:true:华安
                console.log(formData.has("age")+":"+formData.get("age"));//输出:false:null
            });
        });
    </script>
</head>
<body>
<button id="refresh">刷新</button>
</body>
</html>

删除数据

  • 通过delete(key),来删除数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,BootCDN官网地址:http://www.bootcdn.cn/-->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $("#refresh").click(function () {
                let formData = new FormData();
                formData.append("name", "华安");
                console.log(formData.has("name")+":"+formData.get("name"));//输出:true:华安
                formData.delete("name");
                console.log(formData.has("name")+":"+formData.get("name"));//输出:false:null
            });
        });
    </script>
</head>
<body>
<button id="refresh">刷新</button>
</body>
</html>

遍历数据

  • 可以通过entries()来获取一个迭代器,然后遍历所有的数据
    <script type="text/javascript">
        let formData = new FormData();
        formData.append("k1", "v1");
        formData.append("k1", "v2");
        formData.append("k2", "v1");

        var entries = formData.entries();
        console.log(entries.next()); // {done:false, value:["k1", "v1"]}
        console.log(entries.next()); // {done:fase, value:["k1", "v2"]}
        console.log(entries.next()); // {done:fase, value:["k2", "v1"]}
        console.log(entries.next()); // {done:true, value:undefined}
    </script>

  • 迭代器规则
  1. 每调用一次 next() 返回一条数据对象,数据的顺序与添加的顺序一致

  2. 返回的数据对象,当其done属性为true时,说明已经遍历完所有的数据,value 值为 undefined

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

  • 知悉规则之后,则可以用如下的方式进行处理
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,BootCDN官网地址:http://www.bootcdn.cn/-->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <style type="text/css">
    </style>

    <script type="text/javascript">
        let formData = new FormData();
        formData.append("k1", "v1");
        formData.append("k1", "v2");
        formData.append("k2", "v1");

        eachFormData(formData);

        /**
         * 遍历 FormData 表单数据对象
         * @param formData
         */
        function eachFormData(formData) {
            let entriesObj = formData.entries();
            let loopEntrie = entriesObj.next();
            let loopValue = "";
            /** done 为 true 时 表示已经遍历完毕
             */
            while (!loopEntrie["done"]) {
                loopValue = loopEntrie["value"];
                loopEntrie = entriesObj.next();
                console.log(loopValue[0] + "=" + loopValue[1]);
            }
        }
    </script>
</head>
<body>
</body>
</html>

项目实例

模拟表单

  1. FormData实际就是一个表单对象,所以可以用来直接封装表单数据

前 台

    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#uploadButton").click(function(){

                /** 模拟一个简单的用户信息提交
                 * 这些数据平时都会放在页面让用户填写的
                 * 下面完全等价于<form>标签**/
                var formData = new FormData();
                formData.append("name","李四");
                formData.append("age",33);
                formData.append("sex",true);

                /**下面两个设置很关键,和平时使用时略有不同
                 * contentType: false->告诉jQuery不要去设置Content-Type请求头
                 * processData: false->告诉jQuery不要去处理发送的数据
                 */
                $.ajax({
                    url : "resourceController/test.action",
                    type: 'POST',
                    data: formData,
                    dataType:"JSON",
                    contentType: false,
                    processData: false,
                    success : function(data) {
                        console.log(JSON.stringify(data));
                        alert("上传成功")
                    },
                    error : function(data) {
                        console.log(JSON.stringify(data));
                        alert("上传失败");
                    }
                });
            });
        });

    </script>
</head>
<body>
<input type="button" id="uploadButton" value="提交">

后 台

/** 测试使用,请删除
 * 后台接收和平时没有任何区别,可以单个命名接收,或者POJO对象直接自动封装接收
 * 下面是SpringMVC的接收方式,参数名必须与前台表单的name属性一致
 * @param name
 * @param age
 * @param sex
 * @param response
 */
@RequestMapping("test.action")
public void test(String name,String age,String sex, HttpServletResponse response) {
    try {
        response.setContentType("text/json;charset=UTF-8");
        PrintWriter printWriter = response.getWriter();
        JsonObject jsonObject = new JsonObject();

        System.out.println(name+":"+age+"::"+sex);

        printWriter.write(jsonObject.toString());
        printWriter.flush();
        printWriter.close();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

输出结果

 

阅读更多

没有更多推荐了,返回首页