JavaScript :: 웹에 사진올리고 썸네일이미지 보이게(web APIs)

Example: Showing thumbnails of user-selected images 

function handleFiles(files) {
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    
    if (!file.type.startsWith('image/')){ continue }
    
    const img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
    preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed.
    
    const reader = new FileReader();
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(file);
  }
}

MDN에서 가져온 예시.

 

 

---

 

 

파일을 선택 할 수 있는 인풋창을 만든다.

<input type="file" accept="image/*" />

 그리고 인풋창에 이벤트 추가하기. (onFileChange이벤트 추가)

accept="image/*" 이라고 작성하면 이미지파일만 업로드할 수 있다.

 

 

어떻게 작동하는지 콘솔을 사용해 확인해보자.

const onChangeFile = e => {
	console.log(e.target.files);
    }

콘솔로 files를 찍어봤을 때 다음과 같은 파일리스트가 나온다.

 

 

 

 

 

첫번째 파일을 가져오기 위해 아래와 같이 코드 작성.

const onFileChange = e => { 
    const { target : {files } } = e; 
    const theFile = files[0]; 
    const reader = new FileReader();

	reader.onload = finishedEvent => { 
    	console.log(finishedEvent);
    } 
    reader.readAsDataURL(theFile);
}

reader.onload : 파일 불러오기,

reader.readAsDataURL : 파일의 데이터를 읽어옴.

파일을 불러오고 읽는 것이 끝나면 그 결과가

onload의 인수(finishedEvent)로 들어감.

 

currentTarget.result에서 이미지 주소를 확인 할 수 있다!

이 주소를 이용하여 이미지태그에 직접 넣으면 된다.

<img src={ ~~~ result} />

 

 

혹은 

MDN 예시처럼 thefile(업로드한 파일)을 img.file로 추가하고

appendChild 해주는 방법도 있다.