File API
window.onload = function() {
var file = document.getElementById('file');
// 이벤트 연결
file.onchange = function() {
// 파일 객체를 얻어옴
var file = this.files[0];
// 파일명
alert(file.name+'을 선택했습니다.');
};
var btnStart = document.getElementById('btnStart');
// 이벤트 연결
btnStart.onclick = function() {
readProcess();
};
// 파일의 정보 및 내용 읽기
function readProcess() {
// 선택한 파일에 대한 정보 읽기
var file = document.getElementById('file').files[0];
if(!file) { // if(file==undefined)와 동일
alert('파일을 선택하세요!');
return;
}
document.getElementById('filename').textContent = file.name;
document.getElementById('filesize').textContent = '(' + file.size + 'bytes)';
document.getElementById('filetype').textContent = file.type;
// 날짜 한글포맷 전용
document.getElementById('filedate').textContent = file.lastModifiedDate.toLocaleString();
var reader = new FileReader(); // 파일 읽기 기능 제공
// 인코딩 방식 지정
var encodeList = document.getElementById('encoding');
var encoding = encodeList.value;
// 선택한 파일을 읽어서 내용을 문자열로 저장
reader.readAsText(file,encoding); // file 객체, 인코딩 방식
// 파일의 내용을 전부 읽어들이면 이벤트가 발생
reader.onload = function() {
var disp = document.getElementById('contents');
disp.textContent = reader.result; // 읽어들인 내용 반환
};
reader.onerror = function() {
if(reader.error.code === reader.error.NOT_READABLE_ERR) {
alert('파일 읽기 권한이 없습니다.');
}else if(rerader.error.code == reader.error.ABOART_ERR) {
alert('파일 읽기가 중지되었습니다.');
}else {
alert('파일 읽기에 실패했습니다.');
}
};
}
};
<body>
<h2>현재 시스템의 파일 읽기</h2>
<!-- 파일 다중선택 속성 : multiple="multiple" -->
<input type="file" id="file" accept="text/*"> <!-- text타입 파일 읽기 -->
<select id="encoding">
<option>EUC-KR</option>
<option>UTF-8</option>
</select>
<button id="btnStart">읽기</button>
<br>
<div>
<span id="filename">파일명</span>
<span id="filesize">파일크기</span>
<span id="filetype">파일타입</span>
<span id="filedate">파일의 마지막 갱신일시</span>
</div>
<textarea rows="10" cols="50" id="contents"></textarea>
</body>
- 에러 종류
- NOT_FOUND_ERR : 파일을 찾을 수 없을 때
- SECURITY_ERR : 웹애플리케이션에서 사용하기에 보안상 좋지 않다고 판단했을 때
- ABOART_ERR : 파일 읽기 중단
- NOT_READABLE_ERR : 파일 읽기 권한이 없을 때
- ENCODING_ERR : Data URL 길이가 URL 길이의 상한을 초과할 때