일반적으로 파일 업로드를 사용할 때 다음과 같이 submit 방식을 사용합니다.
<form>
<input type="file" name="files" />
<input type="submit" value="submit" />
<form>
하지만 이 방법은 form 자체가 submit 되어야 하기 때문에 제약이 많습니다.
이 경우 다음과 같이 FormData를 이용해서 서버로 전송할 수 있습니다.
1. 테스트를 위한 서버 코드 작성
서버 코드는 Spring boot로 되어 있습니다.
import java.util.List;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
@RestController
public class TestController {
@CrossOrigin("*")
@RequestMapping("/test")
public String home(MultipartHttpServletRequest request) {
List<MultipartFile> files = request.getFiles("files");
for (MultipartFile file : files) {
System.out.println(file.getOriginalFilename() + ":" + file.getSize());
}
return "test";
}
}
2. javascript 코드 작성
2.1 jQuery 사용
- ajax parameter 중에 contentType, processData를 false로 설정해야 합니다.
- data parameter로 전달된 데이터는 jQuery 내부적으로 query string으로 만드는데, 파일 전송에는 이를 피해야 하기 때문에 processData를 false로 설정합니다.
- contentType은 default 값이 "application/x-www-form=urlencoded; charset=UTF-8"인데, 파일을 전송할 때는 "multipart/form-data"로 전송해야 하기 때문에 contentType을 false로 설정합니다.
<html>
<head>
<script src="./jquery-3.6.0.min.js"></script>
<script>
function submitFiles() {
let formData = new FormData();
let files = $("input[name=files]")[0].files;
let i=0;
for(i=0; i<files.length; i++) {
formData.append("files", files[i]);
}
$.ajax({
url: 'http://localhost:8080/test',
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data) {
console.log(data);
},
error: function(e) {
console.log(e);
}
});
}
</script>
</head>
<body>
<form>
<input type="file" name="files" multiple/>
<button type="button" onclick="submitFiles()">submit</button>
</form>
</body>
</html>
2.2 javascript 사용
jQuery를 사용하지 않고 다음과 같이 작성 가능합니다.
<html>
<head>
<script>
function submitFiles() {
let formData = new FormData();
let files = document.querySelector("#files").files;
let i=0;
for(i=0; i<files.length; i++) {
formData.append("files", files[i]);
}
var request = new XMLHttpRequest();
request.open("POST", "http://localhost:8080/test");
request.send(formData);
}
</script>
</head>
<body>
<form>
<input type="file" name="files" id="files" multiple/>
<button type="button" onclick="submitFiles()">submit</button>
</form>
</body>
</html>
[참고 사이트]
https://donggu1105.tistory.com/23
[Java] Ajax & FormData로 서버에 파일 업로드하기①
안녕하세요, 기록하는 동구 입니다. 이번 포스팅에서는 Ajax와 formData를이용해서 파일을 업로드해보겠습니다. 파일업로드 Ajax 방식의 핵심은 FormData라는 브라우저에서 지원하는 클래스입니다. For
donggu1105.tistory.com
https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector
Document.querySelector() - Web API | MDN
Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
Using FormData Objects - Web APIs | MDN
The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. It is primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same
developer.mozilla.org
'front end > javascript' 카테고리의 다른 글
| javascript에서 브라우저 종류 확인하는 방법 (0) | 2022.09.29 |
|---|---|
| javascript에서 UUID 생성하는 방법 (3) | 2022.08.04 |
| javascript random number generation (1) | 2022.08.01 |
| javascript에서 소숫점 반올림하는 방법 (0) | 2022.03.09 |
| javascript - How to get value of selected radio button? (0) | 2021.07.25 |
