자바스크립트에서 이미지 파일( form data ) 을 ajax로 넘기는 방법!
단순히 text value만 넘긴다고 하면 form data를 굳이 ajax로 넘겨야 할 필요는 없다.
그러나 파일을 ajax로 넘겨야할 때는 form data 전체를 넘기는 것 외엔 다른 방법이 없다.
이 때는 formData 객체를 활용하면 된다. 방법은 쉽다. 함정이 좀 있지만.. ㅋ
일단 코드를 보자!
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="file" id="fileInput">
<button type="submit" id="sendButton">전송</button>
<script>
var fileInput = document.querySelector("#fileInput");
var sendButton = document.querySelector("#sendButton");
sendButton.addEventListener("click",function(){
var formData = new FormData();
// form Data 객체 생성
formData.append("attachedImage",fileInput.files[0]);
// 파일 인풋에 들어간 파일들은 files 라는 리스트로 저장된다.
// input에 multiple을 선언해 여러개의 파일을 선택한 경우가 아니라면
// files[0] 으로 input에 추가한 파일 객체를 찾을 수 있다.
});
</script>
</body>
|
cs |
위와 같이 formData 객체를 생성하고
거기에 formData로 넘길 것들을 append로 더해주면 된다
이제 formData를 ajax로 넘겨만 주면 끝인데 함정이 있다.
attachedImage를 append 하고 formData를 console.log로 찍어보면
formData 객체가 찍히긴 하는데 keys와 values 어디에도 추가해 준 데이터를 확인할 수 없다.
아무리 이런 저런 포스팅이 있어도 개발자라면 이런 상황에서 불신을 품기 마련 ( 나만 그런가..?ㅋ )
필자도 콘솔에 안찍히길래 이거 추가 안됐구나 싶어서 한참 다른 방법을 찾았는데
알고보니 단순히 console.log(formData)로 찍으면 내용을 확인할 수 없는게 브라우져 정책이라고..
그래서
|
1
2
3
|
for (var pair of formData.entries()) {
console.log(pair[0]+ ', ' + pair[1]);
}
|
cs |
이렇게 적어줘야 한단다. 이러면
formData에 잘 append 되었음을 확인할 수 있다.
오케이 확인도 했으니 이제 ajax로 넘겨주기만 하면 된다.
넘기는 건 보통의 ajax 보낼때와 같다.
|
1
2
3
4
5
6
7
8
9
10
|
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function() {
if(oReq.status == 200){
location.href = "/reservation/myreservation";
}
});
oReq.open("POST", "/reservation/api/reservations/"+reservationInfoId+"/comments",true);
oReq.send(formData);
|
cs |
이렇게 send 메소드에 파라미터로 formData만 넘겨주면 formData를 백엔드로 잘 넘겨줄 수 있다
참고
(HTML&DOM) FormData - AJAX 폼 전송 준비
안녕하세요. 이번 시간에는 AJAX로 폼 전송을 가능케해주는 FormData 객체에 대해 알아보겠습니다. 보통은 AJAX로 폼(form 태그) 전송을 할 일이 거의 없습니다. 주로 JSON 구조로 키-값 데이터를 전송하니까요. 하지만 폼 전송이 필요한 경우가 있습니다.
www.zerocho.com
formdata를 console.log로 찍어도 안 보이는 이유
누구나 formdata를 조작해서 보내기 위해 new formdata()라는 함수를 써 보았을 것이다. 그런데 해당 함수에 데이터를 집어넣고 console.log로 찍어보면 데이터가 보이지 않는다. 이유를 찾아봤더니 결론적으로 브..
programmerpsk.tistory.com