Spring - 게시판구현(프로필 이미지 변경)

🔎 myPage.js

// 프로필 이미지 추가/변경/삭제 

const profileImage = document.getElementById("profileImage");  // img 태그
const deleteImage = document.getElementById("deleteImage");  // x 버튼 
const imageInput = document.getElementById("imageInput");  // input 태그 

if(imageInput!=null){ // 화면에 imageInput이 있을 경우
    
    // change 이벤트 : 값이 변했을 때 
    // - input type = "file", "checkbox", "radio" 에서 많이 사용 
    // - text/ number 형식 사용 가능 
    //   -> 이 때 input 값 입력 후 포커스를 잃었을 때
    //      이전 값과 다르면 change 이벤트 발생 

    imageInput.addEventListener("change", e => {
        
        // 2MB로 최대 크기 제한 
        const maxSize = 1 * 1024 * 1024 * 2  // 파일 최대 크기 지정(바이트 단위)

        console.log(e.target);  // input 
        console.log(e.target.value); // 업로드된 파일 경로 
        console.log(e.target.files); // 업로드된 파일의 정보가 담긴 배열 

        const file = e.target.files[0];  // 업로드한 파일의 정보가 담긴 객체
        
        
        if(file.size > maxSize){ // 선택된 파일의 크기가 최대 크기를 초과한 경우
            alert("2MB 이하의 이미지를 선택해주세요.") 
            return;
        }


        // JS에서 파일을 읽는 객체
        // - 파일을 읽고 클라이언트 컴퓨터에 파일을 저장할 수 있음 
        const reader = new FileReader();

        reader.readAsDataURL(file);
        // 매개변수에 작성된 파일을 읽어서 저장 후 
        // 파일을 나타내는 URL을 result 속성으로 얻어올 수 있게 함 

        // 다 읽었을 때 
        reader.onload = e => {
            //console.log(e.target);
            //console.log(e.target.result);  // 읽은 파일의 URL

            const url = e.target.result;

            // 프로필이미지(img) 태그에 src 속성으로 추가
            profileImage.setAttribute("src", url);
        }

    });