[Js] 업로드한 이미지 미리보기

See the Pen Untitled by Firedrago95 (@Firedrago95) on CodePen.

function readURL(input, id) {
    if (input.files && input.files[0]) {
        const fileReader = new FileReader();
        fileReader.onload = function (e) {
            document.getElementById(id).src = e.target.result;
        }
        fileReader.readAsDataURL(input.files[0]);
    } else {
        document.getElementById(id).src = "";
    }
}

1. if (input.files && input.files[0])  : 파일 유효성을 검사한다. 
   자바스크립트는 null, 빈문자, NaN, false, undefined, 0을 제외한 모든 값을 true 취급한다.
   input.files[0] 첫번째 배열값을 검사하는 이유는 다중 업로드시 첫번째 값을 표시하기 위함이다.
   
   
2. Const fileReader = new FileReader(); : 파일리더 객체를 생성한다.
   
   
3. fileReader.onload = function (e) {
         document.getElementById(id).src = e.target.result;
   }  : 파일리더의 파일 업로드시 이벤트 핸들러를 정의한다.
   파일이 업로드 되면, 브라우저가 생성한 ProgressEvent<FileReader> 객체가 파라미터로 전달되고,
   이 객체(e) 의 target.result 속성에는 업로드된 파일의 DataURL 형식 문자열이 담겨 있다.
4.  fileReader.readAsDataURL(input.files[0]); : 첫 번째 업로드 파일을 DataURL 형식으로 읽어
   FileReader 객체에 저장한다.
   DataURL 형식은 이미지 데이터를 문자열로 변환한 형식이며, 웹 브라우저에서 이미지를 표시하는 데 사용된다.
   이후에 3 에서 설정한 이벤트 핸들러가 호출된다.