소개
브라우저에서는 보안을 위해서 파일을 읽기만 가능하다.
기본적으로 <input type="file" />방식으로 파일을 입력받는다.
1. File과 FileList
<input type="file" multiple class="input-files" />
<script>
document.querySelector(".input-files").addEventListener("change", e => {
console.log(e.target.files); // FileList를 반환한다.
// FileList는 유사배열이며, 각 인덱스마다 File객체를 가지고 있다
// File객체에는 사용자가 input으로부터 넣은 파일에 대한 정보를 가지고 있다.
});
</script>2. FileReader
File객체를 지정된 형식으로 읽는데 사용한다.
readAsText: 일반 텍스트로 읽음 (.txt)readAsDataURL: base64로 인코딩함... 이미지 처리 (.jpg)readAsArrayBuffer:ArrayBuffer객체로 반환 (.mp4)readAsBinaryString: 바이너리로 읽음
2.1 readAsText 예시 ( 텍스트파일 읽기 )
<body>
<input type="file" accept="*/*" class="input-text-file" />
<textarea class="t-a" cols="30" rows="10"></textarea>
<div class="preview" />
<script>
document.querySelector(".input-text-file").addEventListener("change", e => {
// 파일리더생성
const textFileReader = new FileReader();
// 파일처리를 성공했을 때 실행할 이벤트 등록
textFileReader.onload = (event) => {
document.querySelector(".t-a").innerHTML = event.target.result;
}
// 파일을 텍스트형태로 읽음
// e.target.files는 FileList로 input으로 받은 파일은 File이 들어가 있음
textFileReader.readAsText(e.target.files[0]);
});
</script>
</body>2.2 readAsDataURL 예시 ( 이미지 파일 읽기 )
<body>
<input type="file" accept="image/*" class="input-image-file" />
<div class="preview" />
<script>
document.querySelector(".input-image-file").addEventListener("change", e => {
// 파일리더생성
const textFileReader = new FileReader();
// 파일처리를 성공했을 때 실행할 이벤트 등록
textFileReader.onload = (event) => {
document.querySelector(".preview").style = `background-image: url("${event.target.result}")`;
console.log(event.target.result);
console.log(event);
}
// 파일을 base64형태로
textFileReader.readAsDataURL(e.target.files[0]);
});
</script>
</body>참고한 사이트
...