<!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>image.html</title>
<link href="css/mystyle1.css" rel="stylesheet" />
</head>
<body>
<div class="container3">
<h3>이미지 첨부 기본</h3>
<img src="imgs/default.png" id="img" style="width: 100px; height: 100px;" />
<form action="" method="post" enctype="multipart/form-data">
<input type="file" id="file"/>
<input type="button" value="이미지업로드" />
</form>
<hr />
<h3>이미지 첨부 숨김</h3>
<img src="imgs/default.png" id="img1" style="width: 100px; height: 100px; cursor: pointer;" />
<input type="file" id="file1" style="display: none;"/>
<hr />
<h3>이미지 n개 첨부</h3>
<input type="file" id="file2" multiple />
<div id="out2">
</div>
</div>
<script>
// 이미지 첨부 기본
const file = document.getElementById("file"); // 방법 1
const img = document.querySelector("#img");
// const file = document.querySelector("#file"); 방법 2 <<웹에서 많이 이용
file.addEventListener('change', function(e){
console.log(e.target.files[0]); // 파일에 대한 정보만 불러오기
if(e.target.files[0]) {
// 파일 읽기 라이브러리(기본 제공)
const reader = new FileReader();
// 파일을 읽음
reader.readAsDataURL(e.target.files[0]);
reader.addEventListener('load', function(e1){
console.log('파일 읽기 완료시점');
console.log(e1);
img.src = e1.target.result;
});
// console.log('첨부한 상태');
}
else {
// console.log('첨부하지 않은 상태');
img.src='imgs/default.png';
}
});
// 이미지 첨부 숨김
const file1 = document.getElementById("file1"); // 방법 1
const img1 = document.querySelector("#img1");
img1.addEventListener('click', function(){
file1.click();
});
file1.addEventListener('change', function(e){
if(e.target.files[0]) {
const reader = new FileReader();
reader.readAsDataURL(e.target.files[0]);
reader.addEventListener('load', function(e1){
console.log('파일 읽기 완료시점');
console.log(e1);
img1.src = e1.target.result;
});
}
else {
img1.src = 'imgs/default.png'
}
});
/////////////////////////////////////////////////////////////////////
// 이미지 n개 첨부
const file2 = document.getElementById("file2");
const out2 = document.querySelector("#out2");
// 1번
file2.addEventListener('change', function(e){
out2.innerHTML = ""; // 다시 고를 때 초기화
if(e.target.files) {
for(let tmp of e.target.files){
const reader = new FileReader();
reader.addEventListener('load', function(e1){
console.log(e1.target);
out2.innerHTML += `<img src="${e1.target.result}" style="width: 100px; height: 100px;" />`
});
reader.readAsDataURL(tmp);
}
}
});
// 2번
// file2.addEventListener('change', (e) => {
// });
// 3번
// file2.onchange = function(e){
// };
</script>
</body>
</html>
20211208-