HTML에서 JavaScript와 Java로 파일 업로드하기: 마법 같은 이야기
안녕, 여러분! 오늘은 파일 업로드라는 재미있는 주제로 모험을 떠나 볼 거예요. "파일 업로드?" 조금 생소할 수도 있겠죠? 너무 걱정하지 마세요. 여러분이 손을 잡고 따라오기만 하면 돼요. 자, HTML, JavaScript, 그리고 Java를 사용해 우리의 파일이 어떻게 서버로 날아가는지 함께 알아보도록 해요. 준비됐나요?
Step 1: HTML로 파일 선택 창 만들기
먼저 우리가 해야 할 일은 아주 간단한 HTML 코드를 사용하는 거예요. 여기에서 파일을 선택할 수 있는 귀여운 버튼을 만들어 볼게요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>파일 업로드</title>
</head>
<body>
<h1>파일 업로드 해보기</h1>
<form id="uploadForm">
<input type="file" id="fileInput" />
<button type="button" id="uploadButton">업로드하기</button>
</form>
<p id="status"></p>
<script src="app.js"></script>
</body>
</html>
와우! 벌써 첫 단계를 끝냈어요. 이제 화면에 파일 선택 버튼이 나타났죠? 그런데 이대로는 파일을 올릴 수 없으니 걱정 말고 다음으로 넘어가 봐요.
Step 2: JavaScript로 파일 전송 준비
이제 우리의 파일을 서버로 날려보낼 준비를 할 거예요. 파일은 단순한 데이터 덩어리라서, JavaScript를 사용해 멋지게 다뤄줄 수 있어요.
// app.js
document.getElementById("uploadButton").addEventListener("click", () => {
const fileInput = document.getElementById("fileInput");
const file = fileInput.files[0];
if (!file) {
document.getElementById("status").innerText = "파일을 선택해주세요!";
return;
}
const formData = new FormData();
formData.append("file", file);
fetch("http://localhost:8080/upload", {
method: "POST",
body: formData,
})
.then((response) => response.text())
.then((data) => {
document.getElementById("status").innerText = `업로드 성공: ${data}`;
})
.catch((error) => {
document.getElementById("status").innerText = `업로드 실패: ${error}`;
});
});
와우! 이 코드의 핵심은 FormData예요. 이 친구는 파일을 아주 쉽게 다룰 수 있도록 도와준답니다. 그리고 fetch를 사용해 서버로 파일을 전송할 거예요. 우리 서버가 받을 준비가 됐는지 확인해 볼까요?
Step 3: Java로 파일 업로드 처리
드디어 서버 쪽 코드입니다! Java로 서버를 만들고, 파일을 업로드하는 과정을 다뤄볼게요. 스프링 부트를 이용해서 간단히 만들어 볼 거예요.
@RestController
public class FileUploadController {
@PostMapping("/upload")
public ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file) {
try {
// 파일 저장 경로 설정
String uploadDir = "uploads/";
File directory = new File(uploadDir);
if (!directory.exists()) {
directory.mkdirs();
}
// 파일 저장
Path filePath = Paths.get(uploadDir + file.getOriginalFilename());
Files.write(filePath, file.getBytes());
return ResponseEntity.ok("파일 업로드 완료: " + file.getOriginalFilename());
} catch (IOException e) {
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("업로드 실패!");
}
}
}
여기서 중요한 점은 MultipartFile이라는 친구예요. 이 친구는 클라이언트에서 보낸 파일을 아주 쉽게 받아줄 수 있어요. 파일을 받아서 저장소에 저장하는 부분은 Files.write 메서드를 사용해요. 간단하죠?
Step 4: 실행하고 감탄하기
모든 준비가 끝났어요! 이제 우리의 HTML 파일을 브라우저에서 열고, 파일을 선택한 뒤 "업로드하기" 버튼을 눌러보세요. 콘솔이나 서버 로그에서 파일이 제대로 올라갔는지 확인해 볼 수 있을 거예요.
마무리하며
오늘 우리는 HTML에서 시작해 JavaScript와 Java를 연결하며 파일 업로드를 완성했어요. 어떤가요? 생각보다 어렵지 않죠? 마치 파일이 살아 있는 것처럼, 우리 코드가 데이터를 주고받는 과정은 정말 흥미로워요. 여러분도 이런 방식으로 더 멋진 기능을 만들어보세요!
이제 손을 들어봐요! 어떤 질문이든 환영합니다. 😊
'개발 > Java' 카테고리의 다른 글
| [Java]마법 같은 Process 클래스와 Unix 파일 찾기 모험 (0) | 2025.01.08 |
|---|---|
| [Java] 서버에 있는 파일 다운로드 코드를 쉽게 만들어보자! (0) | 2025.01.06 |
| [Java] Equals는 왜 중요한가? (0) | 2024.12.23 |
| [Java]Java로 오늘이 몇 주차인지 알아보기! (코딩으로 달력 읽는 마법 배우기) (1) | 2024.12.18 |
| [Java] Java의 세션 키를 생성하고 사용하는 방법! (1) | 2024.12.17 |
댓글