FileReader를 이용해서 input에서 이미지파일을 받아 서버없이 이미지를 띄워보자.
준비
<!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>
//이미지 받을 input
<div>
<input type="file" />
</div>
//이미지 띄워줄 곳
<div
class="image-wrapper"
style="border: 1px solid black; width: 200px; height: 200px; margin-top: 50px"
>
<img src="" alt="" />
</div>
</body>
</html>
간단히 이미지를 받을 input 과 img 태그 준비
파일이 들어오면 알아챌수 있도록 input 태그에 onchange 이벤트를 달아주고 이미지 파일을 하나 넣는다.
<input type="file" onchange="onChangeImage(this.files)" />
<script>
const onChangeImage = (e) => {
console.log(e);
};
</script>
요즘 운동을 하는데 몸이 좀 더 커졌으면 하는 개인적인 바람을 담아 "big.jpg" 를 넣었다
this.files 를 매개변수로 받아 콘솔을 찍어보면 { [index]: File, length: number } 형태의 array-like object 가 찍힌다.
- name: 파일 이름
- size: 파일 크기( Byte 값 )
- type: MIME 유형
- lastModified: 파일을 마지막으로 수정한 Unix Time
- lastModifiedDate: 파일을 마지막으로 수정한 시간의 Date 객체
등의 속성이 나온다.
근데 우리는
<img src="" alt="" />
요기 src 부분에 넣어줄 이미지 경로가 필요한데 그런 정보는 없네
고거는 이제 fileReader를 써서 해결해 보자.
fileReader 에는 파일을 읽는 4가지 메서드가 있는데
- readAsText : 그냥 text로 읽는다. 이미지 같은 거 읽으면 인코딩 안되어 있어서 깨진 내용 줌.
- readAsDataUrl: base64로 인코딩 한다. 이미지 다룰때 좋음.
- readAsArrayBuffer: arrayBuffer 객체를 반환. 데이터를 잘게 조각낸건데 이거 서버에 보내서 stream 으로 처리함.
영상, 오디오 등의 스트림 데이터 다루는데 좋음 - readAsBinaryString: 바이너리로 읽음. 처리속도에 민감하게 반응할때 쓴다고 함. 나도 아직 안써봐서 잘 모름.
설명 보면은 당연히 우리는 이미지 다룰거니까 readAsDataUrl 쓰면 될거 같지만 궁금하면 해봐야지 ㅇㅇ
먼저 readAsText
<script>
const onChangeImage = (e) => {
const fileReader = new FileReader();
fileReader.readAsText(e[0]);
fileReader.onload = (e) => {
console.log(e.target.result);
};
};
</script>
깨랑까랑 (인간들아? 무엇을 알고 싶으냐?)
readAsDataUrl
<script>
const onChangeImage = (e) => {
const fileReader = new FileReader();
fileReader.readAsDataURL(e[0]);
fileReader.onload = (e) => {
console.log(e.target.result);
};
};
</script>
base64 인코딩 됐다네여
base64로 인코딩하면 브라우저가 이 문자열들 인식해서 원래 데이터로 만들어줍니다.
길긴한데 이 문자열 주소창에 치면 파일 표시해줌.
파일 정보를 마치 주소처럼 활용함.
img 태그 경로로도 쓸수 있음. 와우.
readAsArrayBuffer
<script>
const onChangeImage = (e) => {
const fileReader = new FileReader();
fileReader.readAsArrayBuffer(e[0]);
fileReader.onload = (e) => {
console.log(e.target.result);
};
};
</script>
요거는 영상 , 오디오 다룰때 조금 조금씩 나눠서 서버로 보내줄 때 쓰는데 나중에 또 다뤄봅시다.
오늘은 이미지만 할꺼임 ㅅㄱ
readAsBinaryString
<script>
const onChangeImage = (e) => {
const fileReader = new FileReader();
fileReader.readAsBinaryString(e[0]);
fileReader.onload = (e) => {
console.log(e.target.result);
};
};
</script>
얘는 이진 데이터 반환하기 때문에 서버같은 데서 읽을수 있음
자~ 그럼 우리 애초 목적인 사진을 함 띄워보자
<script>
const onChangeImage = (e) => {
const fileReader = new FileReader();
fileReader.readAsDataURL(e[0]);
fileReader.onload = (e) => {
console.log(e.target.result);
const imgWrapper = document.querySelector('.image-wrapper');
const imgEl = imgWrapper.querySelector('img');
imgEl.src = e.target.result;
};
};
</script>
이렇게 서버 안거치고 사용자 브라우저에서 바로 이미지 띄워줄때는 readAsDataUrl 쓰면 잘 되니까 이걸로 하셈
이걸로 안하면 큰일 남
사실 아무일 없지만 아무튼 큰일 남
'javascript' 카테고리의 다른 글
| 콜백 함수, promise, async await 그리고 동기와 비동기 (0) | 2022.03.30 |
|---|---|
| array, object 콘솔에서 출력할 때 신기한 점 - console lazy evaluation (0) | 2022.03.25 |
| js sort 함수로 정렬해버리기 (0) | 2022.03.24 |
| js this (javascript this)가 가리키는 3가지 (0) | 2022.03.24 |
| for문 삼대장 - for ...of , for ...in, forEach (0) | 2022.03.10 |
댓글