📎 파일 업로드 방식

✔ <form> 태그를 이용하는 방식 : 브라우저의 제한이 없어야 하는 경우에 사용

• 일반적으로 페이지 이동과 동시에 첨부파일을 업로드 하는 방식
• <iframe>을 이용해서 화면의 이동 없이 첨부파일을 처리하는 방식

<form action="uploadFormAction" method="post" enctype="multipart/form-data">

public void uploadFormPost(MultipartFile[] uploadFile, Model model)
{
    for (MultipartFile multipartFile : uploadFile)
    {
        File saveFile = new File(uploadFolder, multipartFile.getOriginalFilename());
        multipartFile.transferTo(saveFile); // 파일저장
    }
}

✔ Ajax를 이용하는 파일 업로드

• <input type='file'>을 이용하고 Ajax로 처리하는 방식
• HTML5의 Drag And Drop 기능이나 jQuery 라이브러리를 이용해서 처리하는 방식

<input type="file" name="uploadFile" multiple>
<button id="uploadBtn">Upload</button>

let formData = new FormData();
const inputFile = document.querySelector("input[name='uploadFile']");
let files= inputFile.files;

for(let i = 0; i < files.length; i++) {
    formData.append("uploadFile", files[i]);
}

fetch("/uploadAjaxAction",{
    method: "POST",
    body: formData
})
.then(response => alert("Uploaded"));

public void uploadAjaxPost(MultipartFile[] uploadFile)
{
    String uploadFolder = "C:\\\\upload";

    for(MultipartFile multipartFile : uploadFile)
    {
        String uploadFileName = multipartFile.getOriginalFilename();

        // IE는 파일 경로까지 가지고 옴
        uploadFileName = uploadFileName.substring(uploadFileName.lastIndexOf("\\\\") + 1);

        File saveFile = new File(uploadFolder, uploadFileName);
        multipartFile.transferTo(saveFile); // 파일저장
    }
}

❗ 파일 업로드 시 고려해야 할 점

• 동일한 이름으로 파일이 업로드 되었을 때 기존 파일이 사라지는 문제
• 이미지 파일의 경우에는 원본 파일의 용량이 큰 경우 섬네일 이미지를 생성해야 하는 문제
• 이미지 파일과 일반 파일을 구분해서 다운로드 혹은 페이지에서 조회하도록 처리하는 문제
• 첨부파일 공격에 대비하기 위한 업로드 파일의 확장자 제한

🔗파일 업로드 상세 처리

✔ 파일의 확장자나 크기의 사전 처리

const regex = new RegExp("(.*?)\\.(exe|sh|zip|alz)$");
const maxSize = 5242880; // 5MB

const checkExtenstion = (fileName, fileSize) => {
    if(fileSize >= maxSize) return false;
    if(regex.test(fileName)) return false;
    return true;
}

중복된 이름의 파일 처리