<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 보안상의 이유로 사용자 컴퓨터에 파일을 쓰는 것은 불가
읽기는 사용자가 선택해주는 파일만 읽기 가능! -->
<!-- 사진이 표시 안되면 alt가 뜸-->
<img src="#" id="id_sajin" width="100" height="100" alt="이미지 있엉?"><br>
<input type="file" id="id_select" value="" accept=".jpg,.jpeg,.png,.gif" onchange="f_file()">
<script>
// preview 이런식으로 밖에 사용되지 않으므로
// 이 파일을 잘 가지고 있으면 고민 안해도 된다
var v_file = document.getElementById("id_select");
function f_file() {
// files는 file객체들을 가진 배열이라고 생각하면 좋음
// console.log(v_file.files) // files 속성 눈으로 확인
console.log(v_file.files[0].name);// 선택한 파일의 name 출력
var v_file2 = v_file.files[0]; // file객체를 뽑아냄
var v_fileReader = new FileReader(); // file을 읽어줄 사람 필요
// v_fileReader.readAsText(v_file2) // 텍스트 파일을 읽어라
v_fileReader.readAsDataURL(v_file2) // 이미지 파일 읽기, 가장 많이 사용
v_fileReader.onload = function () {
// 다 읽고나면 result라는 속성에 그 값을 담아줌
document.getElementById("id_sajin").src = v_fileReader.result;
// alert(v_fileReader.result)
}
}
</script>
</body>
</html>
