스프링부트 파일 업로드 ! 비동기 버전 3. 넣은 파일 썸네일 띄우기

썸네일 띄우기!! 

저번 과정에서 

이 경로로 드롭이벤트한 파일을 보냈을때 

파일이 저장된것을 확인했다 

그러고 그 저장이 끝난후 ! 

return 값이 

저장된 경로가 나오는 리스트를 반환 받게 되어있엇다 !! 

 

그래서 

위위 코드를 보면 

showFileData(fileNames); 이 함수에 그 리스트를 넣는걸 확인 할수있다 ! 그럼 그 함수를 확인 해보러 가자 ! 

 

화면에 보여주는데 . 저게 이미지인지 아닌지 부터확인 해야된다 ! 

확인 하는 함수로 가면 ! 

내가 넣은 사진의 특징을 보면 ! 

끝이 .jpg로 되어있고 보통 사진은 , 상어.jpg 이런식의 모양을 나타낸다 

그래서 .jpg 로 이게 그림인지 아닌지 확인할수있는것이고 ! 

그래서 

let originFileName = fileName.substring(fileName.indexOf("_") + 1);

이런 함수를 통해서 

 

앞에 붙은 여러가지 문자열을 자르는 1차 가공을 해서 

isImageFile 

 

확장자를 구분하는 함수에 넣어준다 ! 

저 함수로 가보면 

jpg$ jpg 로 끝나는것 이라는 뜻인데 

return이 값이 매치되면 ,트루 , 아니면 false 를 반환한다 ! 

고로 

 

파일이 이미지라면~~ 이까지는 된것이다 !

이제 다시 이게 이미지라는걸 확인 했으니까 

                    const $img = document.createElement('img');

                    // 이미지 태그 생성

                    $img.classList.add('img-sizing'); // css 를 쓰기 위해서 ! 만듬

                    // class="img-sizing"

                    // $img.setAttribute('src', fileName); 이렇게 하니까 보안상 이슈가 생김 그래서

                    $img.setAttribute('src', '/loadFile?fileName=' + fileName);

                    // 경로

                    $img.setAttribute('alt', originFileName); // 시각 장애인에 대한 배려

                    // 이미지가 안나올시 , 또는 이미지를 볼수없는 사람이 읽을수 있도록 사진에 코멘트를 달아준다 !

                    // <img src = "이미지 경로" alt="이미지에 대한 설명 (코멘트)">

                    $('.uploaded-list').append($img);

                    //uploaded-list 를 가진 클래스에 , 이미지 파일을 추가한다 !

 그럼 이렇게 뙇!