웹 애플리케이션에서 여러 개의 PDF 파일을 업로드하고 미리보기할 수 있도록 구현한 최종 코드를 소개합니다. 이 코드에서는 PDF가 아닌 파일을 선택하면 자동으로 제거하고, 유효한 파일만 유지하여 미리보기를 제공하며, AJAX를 통해 서버로 업로드할 수 있도록 구성되었습니다.
✅ 1. HTML + jQuery (프론트엔드 코드)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>PDF 다중 업로드 & 미리보기</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>PDF 다중 업로드 및 미리보기</h2>
<!-- 파일 업로드 폼 -->
<input type="file" id="fileInput" name="pdfFiles[]" multiple>
<button id="uploadBtn">업로드</button>
<!-- 미리보기 영역 -->
<div id="previewContainer"></div>
<script>
$(document).ready(function() {
$("#fileInput").on("change", function(event) {
$("#previewContainer").empty(); // 기존 미리보기 삭제
var files = event.target.files;
var validFiles = []; // 유효한 PDF만 저장할 배열
var dataTransfer = new DataTransfer(); // 새 파일 리스트 생성
$.each(files, function(index, file) {
if (file.type !== "application/pdf") {
alert("PDF 파일만 선택 가능합니다.");
} else {
validFiles.push(file);
dataTransfer.items.add(file); // 유효한 파일만 추가
}
});
// 유효한 파일만 input 요소에 다시 설정
$("#fileInput")[0].files = dataTransfer.files;
// 유효한 파일만 미리보기
$.each(validFiles, function(index, file) {
var fileURL = URL.createObjectURL(file);
var iframe = $("<iframe>", {
src: fileURL,
width: "500",
height: "600",
class: "pdf-preview",
css: { "margin-bottom": "10px" }
});
$("#previewContainer").append(iframe);
});
});
// 파일 업로드 버튼 클릭 시
$("#uploadBtn").on("click", function() {
var formData = new FormData();
var files = $("#fileInput")[0].files;
if (files.length === 0) {
alert("파일을 선택해주세요.");
return;
}
$.each(files, function(index, file) {
formData.append("pdfFiles", file);
});
$.ajax({
url: "/upload",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(response) {
alert("파일 업로드 성공!");
console.log(response);
},
error: function(xhr) {
alert("파일 업로드 실패: " + xhr.responseText);
}
});
});
});
</script>
</body>
</html>✅ 2. 코드 상세 설명
1️⃣ PDF 파일 검증 및 선택 제한
- 사용자가 파일을 선택하면 change 이벤트가 발생.
- file.type !== "application/pdf"인 경우, 경고 메시지를 띄우고 추가하지 않음.
- dataTransfer 객체를 활용해 유효한 PDF만 유지한 채 input에 다시 설정.
2️⃣ PDF 미리보기 기능
- URL.createObjectURL(file)을 사용하여 각 PDF를 미리보기할 수 있도록 URL을 생성.
- 동적으로 <iframe> 요소를 만들어 미리보기 영역에 추가.
- css: { "margin-bottom": "10px" }을 적용하여 PDF 간격 조정.
3️⃣ 파일 업로드 기능 (AJAX 활용)
- FormData 객체를 사용해 선택된 모든 PDF 파일을 서버로 전송.
- processData: false, contentType: false 설정을 통해 multipart/form-data로 전송 가능하도록 처리.
- 업로드 성공 시 alert("파일 업로드 성공!")을 띄우고, 응답을 콘솔에 출력.
✅ 3. Spring Boot (백엔드 코드)
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.util.List;
@RestController
public class FileUploadController {
@PostMapping("/upload")
public ResponseEntity<?> uploadMultipleFiles(@RequestParam("pdfFiles") List<MultipartFile> files) {
try {
for (MultipartFile file : files) {
String fileName = file.getOriginalFilename();
File saveFile = new File("uploads/" + fileName);
file.transferTo(saveFile); // 파일 저장
}
return ResponseEntity.ok("파일 업로드 성공");
} catch (IOException e) {
return ResponseEntity.status(500).body("파일 업로드 실패: " + e.getMessage());
}
}
}
✅ 4. 코드 설명 (백엔드)
1️⃣ 다중 파일 업로드 처리
- List<MultipartFile>을 사용해 여러 개의 파일을 한 번에 받음.
- for 루프를 돌며 각 파일을 uploads/ 디렉토리에 저장.
2️⃣ 응답 처리
- 파일 저장 성공 시 ResponseEntity.ok("파일 업로드 성공") 반환.
- 오류 발생 시 500 INTERNAL SERVER ERROR 상태와 함께 에러 메시지 반환.
✅ 5. 기대 결과
개선된 기능
✅ PDF 파일만 선택 가능 (다른 파일 자동 제외)
✅ 선택한 PDF 파일 미리보기 지원 (iframe 활용)
✅ AJAX를 통한 다중 파일 업로드 가능
✅ Spring Boot 백엔드에서 파일을 저장하고 응답 반환
이제 위 코드를 적용하면 여러 개의 PDF 파일을 업로드하고 미리보기를 제공하는 기능을 완벽하게 구현할 수 있습니다!
'Front-end' 카테고리의 다른 글
| 동적 테이블 생성 및 모달 데이터 선택 기능 구현 (0) | 2025.02.20 |
|---|---|
| jQuery를 활용한 이미지 미리보기 및 파일 업로드 구현하기 (0) | 2025.02.18 |
| [JQuery로 파일 확장자 추출 및 검증하기] (0) | 2025.02.14 |