<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
document.getElementById("btnStart").onclick = function(){
readFile();
}
}
function readFile(){
var file = document.getElementById("file").files[0];
//alert(file);
document.getElementById("fileName").textContent = file.name;
document.getElementById("fileSize").textContent = file.size;
var reader = new FileReader();
var encodeList = document.getElementById("encoding");
var encoding = encodeList.options[encodeList.selectedIndex].value;
reader.readAsText(file, encoding);
reader.onload = function(){
var display = document.getElementById("content");
display.textContent = reader.result; // 읽은 파일
}
reader.onerror = function(e){
alert("읽기 오류:" + e.target.error.code);
return;
}
}
</script>
</head>
<body>
<h2>클라이언트 컴의 파일 읽기</h2>
<input type="file" id="file">
<select id="encoding">
<option value="utf-8">UTF-8</option>
<option value="euc-kr">EUC-KR</option>
</select>
<button id="btnStart">읽기</button>
<br>
<div>
<span id="fileName">파일이름</span>
<span id="fileSize">파일크기</span>
</div>
<textarea rows="10" cols="50" id="content" readonly="readonly"></textarea>
</body>
</html>
'HTML' 카테고리의 다른 글
| form태그의 enctype 속성 (2) | 2014.04.02 |
|---|---|
| html5 - sqlDB 사용하기 (0) | 2014.02.14 |
| HTML5 - 구글맵 사용하기 (0) | 2014.02.14 |
| html5 - webworker (쓰레드 개념) 멀티태스킹 (0) | 2014.02.14 |
| html5 - storage (쿠키보다 큰 용량을 임의로 저장시킬 수 있는 기능) (0) | 2014.02.14 |