예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="image-upload">
<label for="file-input">
<img src="./upload.jpg" />
</label>
<!-- multiple : type 속성값이 “file”인 경우에는 CTRL이나 SHIFT키를 사용하여 여러 파일을 동시에 선택할 수 있습니다. -->
<input id="file-input" type="file" multiple />
</div>
<!-- 미리보기를 표시할 컨테이너 -->
<div id="preview-container"></div>
<script>
// file요소에대한 change이벤트
document.querySelector('#file-input').addEventListener('change', e => {
//미리보기를 표시할컨테이너 객체 할당
const preview = document.querySelector('#preview-container');
//컨테이너의 내부를모두 지운다.
preview.innerHTML = '';
//선택된 파일의 파일리스트(배열 아님)
const file = e.currentTarget.files;
console.log(file);
//선택된 파일의 수 만큼 반복
Array.from(file).forEach((v, i) => {
console.log(v);
//i번째 파일을 가져온다.
const img = URL.createObjectURL(v);
//이미지를 표시할 div 태그를 생성
//createElement는 <body>태그 안에 코딩되어 있지 않은 새로운 HTML태그를 생성
//-> 화면상 보이지 않음
const div = document.createElement('div');
div.classList.add('previews');
div.style.backgroundImage = 'url(' + img + ')';
//JS로 생성한 새로운 HTML태그를 화면상에 표시하기 위해
//기존의 Element객체 안에 자식 요소로 추가 (append)
preview.appendChild(div);
});
});
</script>
</body>
</html>
냠소현 개발일지