파일 업로드를 구현하기 위해서는 스프링과 JavaScript 둘 다 사용해야 합니다.
스프링을 이용해 서버 측에서 파일을 처리하는 코드를 작성해야 하며,
이후 JavaScript를 사용해 클라이언트 측에서 파일 선택 및 업로드를 처리합니다.
스프링을 이용한 파일 처리
먼저, 스프링을 사용해 파일 처리를 구현해보겠습니다. 파일을 업로드하려면 MultipartResolver를 사용해야 합니다. 따라서, 스프링 설정 파일에 다음과 같은 빈을 추가해줍니다.
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="5242880"/>
</bean>
이제 파일을 처리할 컨트롤러를 작성해보겠습니다.
@Controller
public class FileController {
@RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
public String uploadFile(@RequestParam("file") MultipartFile file) {
// 파일 처리 코드 작성
return "redirect:/success.html";
}
}위의 코드에서 "/uploadFile"은 파일 업로드를 처리할 URL을 나타내며, @RequestParam("file") MultipartFile file은 클라이언트 측에서 전송한 파일을 처리할 변수입니다. 파일 처리 코드를 작성하고, 파일 업로드가 성공하면 "redirect:/success.html"로 페이지를 이동시킵니다.
JavaScript를 이용한 파일 선택 및 업로드
이제 클라이언트 측에서 파일 선택 및 업로드를 처리하기 위해 JavaScript를 사용합니다. HTML 파일에서 파일 선택 폼을 작성하고, JavaScript를 사용해 파일을 선택하면 서버로 파일을 전송합니다.
<form id="fileUploadForm" enctype="multipart/form-data" method="POST" action="/uploadFile">
<input type="file" name="file" id="file"/>
<button type="submit" id="submitBtn">Upload</button>
</form>위의 코드에서 form 태그의 enctype 속성은 파일을 전송할 때 사용하는 인코딩 타입을 나타내며,
method 속성은 파일을 전송할 HTTP 메서드를 나타냅니다. action 속성은 파일을 전송할 URL을 나타냅니다.
input 태그의 name 속성은 서버에서 파일을 처리할 때 사용할 변수 이름을 나타냅니다.
이제 JavaScript 코드를 작성합니다.
var form = document.getElementById("fileUploadForm");
var fileInput = document.getElementById("file");
var submitBtn = document.getElementById("submitBtn");
submitBtn.addEventListener("click", function (event) {
event.preventDefault();
var file = fileInput.files[0];
var formData = new FormData();
formData.append("file", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", form.action, true);
xhr.onload = function (e) {
if (xhr.status === 200) {
// 파일 업로드 성공시 처리할 코드 작성
console.log(xhr.responseText);
} else {
// 파일 업로드 실패시 처리할 코드 작성
console.log(xhr.responseText);
}
};
xhr.send(formData);
});
위의 코드에서는 form, fileInput, submitBtn 변수를 사용해 파일 선택 폼과 업로드 버튼을 참조합니다.
submitBtn 버튼에 클릭 이벤트를 등록하고, 클릭 이벤트 발생 시 event.preventDefault() 함수를 호출해 폼이 제출되는 것을 방지합니다.
fileInput.files[0]을 사용해 선택된 파일을 가져오고, FormData 객체를 사용해 파일 데이터를 formData 변수에 추가합니다.
XMLHttpRequest 객체를 사용해 서버로 파일을 전송하고, 파일 업로드 결과를 처리하는 onload 함수를 등록합니다.
이제 파일 선택 폼과 업로드 버튼을 누르면 파일이 서버로 전송되고, 스프링 컨트롤러에서 파일을 처리하는 코드가 실행됩니다.
파일 업로드 결과에 따라 적절한 처리를 할 수 있도록 JavaScript 코드에서 파일 업로드 결과를 처리할 코드를 작성하면 됩니다.
댓글