Programming/Web

[Web] HTML5 File API

성일만 2014. 9. 2. 11:04

HTML5 File API


HTML5 File API를 사용하면 로컬파일 정보 및 내용을 얻고 JavaScript로 처리할 수 있습니다. 

앞으로 HTML5의 보급과 클라우드 서비스가 진행되는 것에 따라 중요한 기능이 되는 것은 사실입니다. 

그래서 예제를 만들어 보았고 드러그앤드롭도 대응하고 있습니다. 단, 현재 Chrome으로 로컬 작업시, 

보안상 드러그앤드롭에 반응하지 않는 경우가 있습니다.


예제 소스코드

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>File API 예제</title>
<style type="text/css">
label {
width : 200px;
}
</style>
<script>
var $id = function(id) { return document.getElementById(id); }
var $class = function(c, n) { n=n||0; return document.getElementsByClassName(c)[n]; }
var $classes = function(c) { return document.getElementsByClassName(c); }

window.onload = function()
{
// read버튼 클릭시 실행하는 함수 등록
$id("read-button").addEventListener("change", onChangeFile, false);
// 드롭 이벤트 등록
$id("ta").addEventListener("dragover", onCancel, false);
$id("ta").addEventListener("dragenter", onCancel, false);
$id("ta").addEventListener("drop", onDropFile, false);
}; 

// 파일 변경시 이벤트
var onChangeFile = function(e)
{
// File 객체
var file = e.target.files[0];
// 파일 읽기
readFile(file);
};

// 파일 드롭시 이벤트
var onDropFile = function(e)
{
e.preventDefault();
// File 객체
var file = e.dataTransfer.files[0];
// 파일 읽기
readFile(file);
};

// 취소처리
var onCancel = function(e)
{
if(e.preventDefault) { e.preventDefault(); }
return false;
};

// 파일 읽기
var readFile = function(file)
{
var func_name = $id("func-name").value; // 함수명 얻기
var encode_type = $id("encode-type").value;// encode타입 얻디
if (encode_type=="default") encode_type = undefined;

// 파일 정보 표시
$id("file-name").innerHTML = file.name; // 파일명
$id("file-size").innerHTML = file.size; // 파일크기
$id("file-type").innerHTML = file.type; // 파일타입

// 내용 읽기
var reader = new FileReader(); // FiileReader 생성
// 로드함수 등록
reader.onload = function(e) {
// 읽어든인 파일 내용을 텍스트영역에 설정
$id("ta").value = e.target.result;
};

// 텍스트로서 파일 읽음
// reader.readAsText(file);
// 실렉트 폼으로 선택하고 있는 함수명으로 파일읽기
reader[func_name](file, encode_type);
};

</script>
</head>
<body>
<h1>File API 예제</h1>

<p>Name : <span id="file-name">????</span></p>
<p>Size : <span id="file-size">????</span></p>
<p>Type : <span id="file-type">????</span></p>
<p>Value : </p>
<textarea id="ta" cols=64 rows=16></textarea>
<br />

<hr />

<label>
Func Name : 
<select id="func-name">
<option value="readAsText">readAsText</option>
<option value="readAsDataURL">readAsDataURL</option>
<option value="readAsArrayBuffer">readAsArrayBuffer</option>
<option value="readAsBinaryString">readAsBinaryString</option>
</select>
</label>
<br />

<label>
Encode Type : 
<select id="encode-type">
<option value="default">default</option>
<option value="utf-8">utf-8</option>
</select>
</label>
<br />

<input id="read-button" type="file" />
</body>
</html>


FileReader 객체에 대해

FileReader 객체는 파일을 읽어들이기 위한 객체입니다. 파일을 읽기 위한 함수는 총 4개입니다.

- readAsText(blob, encoding)

- readAsDataUL(blob)

- readAsBinary(blob)

- readAsArrayBuffer(blob)

주로 많이 사용하는 것은 readAsText와 readAsDataURL이라고 봅니다.



출처 : http://html5dev.kr/185

[출처] File API|작성자 CHO


저작자표시 비영리 변경금지

'Programming > Web' 카테고리의 다른 글

[Web] URI, URL, URN 이란?  (0) 2014.09.18
[Web] Servlet/JSP Programming  (0) 2014.09.18
[Web] HTTP Protocol 과 REST  (0) 2014.09.02
[Web] *.jsp 접근 막기  (0) 2014.07.23
[Web] 웹 접근성  (0) 2014.05.26

'Programming/Web'의 다른글

  • 현재글[Web] HTML5 File API

관련글

티스토리툴바