<!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="container">
<h3>1. 이미지 첨부 기본</h3>
<img src="imgs/defualt.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>2. 이미지 첨부 숨김</h3>
<img src="imgs/defualt.png" id="img1"
style="width: 100px; height: 100px; cursor: pointer;"/>
<input type="file" id="file1" style="display: none;" />
<hr />
<h3>3. 이미지 n개 첨부</h3>
<input type="file" id="file2" multiple />
<div id="out2"></div>
</div>
<script>
const file2 = document.getElementById("file2");
const out2 = document.querySelector("#out2");
file2.addEventListener('change', function(e){
if(e.target.files) {
out2.innerHTML = "";
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);
}
}
});
const file1 = document.getElementById("file1");
const img1 = document.querySelector("#img1");
img1.addEventListener('click', function(){
file1.click();
});
file1.addEventListener('change', function(e){
if(e.target.files[0]) {
console.log(e.target.files[0]);
const reader = new FileReader();
reader.addEventListener('load', function(e1){
img1.src = e1.target.result;
});
reader.readAsDataURL(e.target.files[0]);
}
else{
img1.src = 'imgs/defualt.png';
}
});
const file = document.getElementById("file");
const img = document.querySelector("#img");
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;
});
}
else{
console.log('첨부하지 않은 상태');
img.src = 'imgs/defualt.png';
}
});
</script>
</body>
</html>