不是第一

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/keys

  • 该FormData界面提供了一种方便地构建一组代表表单字段及其值的键/值对，

  • 然后可以使用该**XMLHttpRequest.send()**方法轻松发送。如果编码类型设置为，

  • 它使用与格式相同的格式 "multipart/form-data"

  • 实现的对象FormData可以直接在结构中使用

    for...of，
// 而不是
    entries()：
    for (var p of myFormData)
// 等效于
    for (var p of myFormData.entries())。

注意：此功能在Web Workers中可用。

构造函数编辑 FormData()

FormData提供的方法

FormData.delete()

从 FormData 对象中删除键/值对。

FormData.append()

向 FormData 中添加新的属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值。

FormData.set()

给 FormData 设置属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值

FormData.get()

返回在 FormData 对象中与给定键关联的第一个值

FormData.getAll()

返回一个包含 FormData 对象中与给定键关联的所有值的数组。

FormData.delete():从FormData对象里面删除一个键值对

FormData.has()

返回一个布尔值表明 FormData 对象是否包含某些键

FormData.keys()

返回一个包含所有键的iteratoropen in new window对象

FormData.values()

返回一个包含所有值的iteratoropen in new window对象。

FormData.entries()

返回一个包含所有键值对的iteratoropen in new window对象

let btn = document.getElementById("btn");
        btn.onclick = function () {
            // 根据ID获得页面中的form表单元素
            var form = document.querySelector("#userForm");
            // 将获得的表单元素作为参数,对formData进行初始化
            var formData = new FormData(form);
            formData.append("name", "Lori");
            formData.append("name", "Jack");
            formData.append("gender", "Jacie");
            // 通过get方法只能读取第一个key为name的值
            console.log(formData.get("name")); // Lori
            // 通过getAll方法能获取到所有key为name的值
            console.log(formData.getAll("name")); //["Lori","Jack"]
            // 通过set修改数据,如果存在多个的话,就会改到只剩下一个key为name的值
            formData.set('name', "李白"); // ["李白"]
            // 如果不存在的话,就会添加一条数据
            formData.set('age', 30);
            console.log(formData.getAll('name'));
            console.log(formData.getAll('age'));
            // 通过delete方法删除key为gender的数据
            formData.delete("gender");
            console.log(formData.get('gender')); // null

            for (let keys of formData.keys()) {
                console.log(keys); // userName  sex city name age
            }

            for (let keys of formData.entries()) {
                console.log(keys); // ["userNamee", "李白"] ["sex", "male"] ["city", "1"] ["name", "李白"] ["age", "30"]
            }

            for (let keys of formData.values()) {
                console.log(keys);
            }
        }

formData文件

<form id="userForm">
 
            头像:<input type="file" name="headImg"></p>
         
        <input type="button" id="btn" value="添加"></p>
    </form>
<script>
       var formdata=new FormData(document.getElementById("userForm"));
            var xhr = new XMLHttpRequest();
            xhr.open("post", "/app/upload/user/file/xxx");

</script>

java 后台

@RequestMapping("/leave/upload")
	public Response<Object> upload(@RequestParam(value = "act_fr") MultipartFile file,
			@RequestParam Map<String,Object>  param ,
			HttpServletRequest req,HttpServletResponse resp){
		Assert.notNull(file, "activiti file is must be not null !!");
		 
 		String msg = ias.deployProcess(file,param);
		return Response.success(msg);
	}
  • html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>use activiti</title>
     <script src="/local_js/jquery-3.2.1.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
       
        box-sizing: border-box;
    }

 

    .local_ap {
        width: 100%;
        height: 100%;
        background-color: #ededed;
        display: flex;

    }

    .child {
        flex: 1;
    }

    .act_from {
        padding: 20px;
        border: 1px solid black;
    }

    .btn_act{
        margin-left: 70%;
        padding: 10px;
        background-color: #539799;
        color: #ffffff;
        border-radius: 5px;
    }
</style>

<body>
    <div class="local_ap">

        <div class="child"> </div>
        <div class="child act_from">

            <form id="v_form_act" >
                <label for="工作流文件">
                    <input type="file" name="act_fr" id="act_f">

                </label>
                <br>
                  <input type="text" name="process_name" id="proce1">
               <input type="radio" name="showa" id="va" value="hhh">
               <input type="radio" name="showa" id="vac" value="bbb">
                   <br>
                <label for="上传">
                            <button type="button" class="btn_act" onclick="uploadFile()" > 开始上传</button>
                </label>
            </form>

        </div>
        <div class="child"> </div>

    </div>
</body>
<script>

function uploadFile(){
     
    let fd =  new FormData(document.getElementById('v_form_act'));
    $.ajax({
        url: "/activi/leave/upload",
        type: "POST",
        data: fd,
        contentType: false,
        processData: false,
        success: function (data) {
            console.log(data)
        },
        error: function () {
            alert("上传失败！");
        }
    });
 
}

</script>

</html>