본 테스트는 jquery를 이용했습니다.


1. FormData 란

FormData는 <form> 태그의 역할을 수행하는 객체이다.
FormData를 사용하면 반드시 ContentType과 processData를 false로 해주어야 한다.

contentType을 false로 설정해줄 경우 contentType이 자동으로 아래와 같이 설정된다.

multipart/form-data; boundary=----WebKitFormBoundaryzS65BXVvgmggfL5A

1) FormData 생성

var formData = new FormData();  or new FormData(form);

2) Form에 데이터 삽입

formData.append(key, value); // input태그를 통해 데이터를 삽입하는 방식과 동일하다.

2. 예제

1). member.html

<html>
...
        <form id="editForm">
            <input name="id" value="2020"/>
            <input type="file" name="file"/>
            <button id="saveBtn" type="button">저장</button>
        </form>
...
</html>

2). member.js

$(document).ready(function () {
    var editForm = $("#editForm");

    $("#saveBtn").click(function () {
        var formData = new FormData(editForm[0]);
        formData.append("name", "kim");
        formData.append("description", "how are you?");

        $.ajax({
            method: "POST",
            data: formData,
            dataType: 'json',
            processData: false,
            contentType: false,
            success: function () {
                console.log("completed!");
            },
            error: function () {
                alert("failed! ")
            }
        });
    });
});

formData.append(key, value)를 통해 input 태그없이 추가적으로 데이터를 삽입할 수 있다.

3). MemberTO

public class MemberTO {

    private int id;
    private String name;
    private String description;

    private MultipartFile file;

//getter,setter,toStrng 생략
}

4). TestController

@Controller
public class TestController{
   @GetMapping(value = "/member")
    public String memberPage() {
        return "page/member";
    }

    @ResponseBody
    @PostMapping(value = "/member")
    @ResponseStatus(HttpStatus.NO_CONTENT)
    public void memberData(MemberTO member) {

        logger.info("[MYTEST] {} {}", member, member.getFile().getOriginalFilename());
    }

}

5). 결과

5-1) form Data

5-2) log

[MYTEST] Test{id=2020, name=kim, description=how are you?} 2.png

 

출처 : https://developer.mozilla.org/ko/docs/Web/API/FormData/FormData

+ Recent posts