안녕하세요?

이번엔 HTML 5 의 File API 를 살펴보려 합니다.

이젠 Web Application 으로 사용자 PC 의 파일을 건드릴 수 있습니다. File API 로 요... 이젠 훨씬 더 많은 일들을 할 수 있겠죠?
엄청나다고 생각하지 않으신가요?

19-1. File API Interface
  • File interface
  • FileReader interface
File interface 를 사용하면 File 의 File Name 이나 Size 등 기본적인 정보에 접근 할 수 있습니다.
File Reader interface 는 File 의 내용을 읽을 수 있는 기능을 제공합니다.

아... 갑자기 걱정하시는 분들이 계시겠죠?
그럼. 보안은? 이라고...
File interface 는 Browser 가 막 건드릴 수있는 것이 아니라 File 선택 Form 이나 Drag & Drop 을 통해서 사용자가 직접 선택한 File에 한정되므로 안심해도 좋을 것입니다.


19-2. File interface

File interface 가 가지고 있는 속성과 함수는 다음과 같습니다.
 Attribute/Method  설명
 name  File 이름
 type  File 의 MIME Type(알수 없을때는 null)
 urn  File 의 범용 식별자
 size  File Size
 slice(start, length)  시작위치와 끝 위치를 지정하여 파일의 내용을 잘라내 새로운 Blob객체를 만드는 함수
위 사항들은 아래 예제에서 사용법을 확인하실 수 있을 것입니다.

19-3. FileReader interface

FileReader interface 는 비동기적인 상황에서 사용을 하는데요.
다음은  FileReader interface 가 가지고 있는 속성과 함수들입니다. 
 Attribute/Method  설명
 readAsBinaryString(fileBlob)  File 내용을 읽어 Binary 문자열로 저장
 readAsText(fileBlob, encoding)  File 내용을 읽어 들여 문자열로 저장, 두번째 인수는 File 의 문자 encodeing 을 지정할 수 있음(기본값 : UTF-8)
 readAsDataURL(file)  File 내용을 읽어 dataURL 형식의 문자열로 저장
 result  읽어들인 File 내용
 error  error 발생시의 error 정보
 onload  읽어들이기에 성공 했을 때 호출하는 event handler. load event 에 대응
 onprogress  읽어들이기의 진행 상황을 얻을 수있는 event handler. progress event 에 대응
 onerror  읽어들이기 error 시에 호출되는 event handler. error event 에 대응.

19-4. Error

다음은 FileReader 가 동작하는 중에 발생하는 Error 에 대한 상수값들입니다.
 상수  Code  설명
 NOT_FOUND_ERR  1  읽을 File 을 찾지 못할때
 SECURITY_ERR  2  Web Application 이 Access 하기에 안전하지 못한 File일 때
 File 에 너무 많은 읽기 호출이 있을 때
 사용자의 선택한 이후에 File 에 변경이 있을 때 
인 상황에서 사용할 수 있습니다.
 ABORT_ERR  3  예를 들어 abort() 함수 호출과 같은 것으로 인해 읽기가 중지되었을 때
 NOT_READABLE_ERR  4  File 접근 권한 문제와 같은 것으로 인해 File 을 읽지 못할때
 ENCODING_ERR  5  동기적, 비동기적으로 readAsText() 함수를 사용할 때는 사용할 수없습니다.
 DataURL FH 로 표현될 수 있는 File 이나 Blob 을 구현한 제한된 곳의 DataURL 에 대한 URL 길이 제한에 걸렸을 때 



19-5. 사용법

File interface 는 다음과 같이 사용할 수있습니다. File Name 과 File Size 를 조회합니다.
var file = document.getElementById("file").files[0];

document.getElementById("fileName").textContent = file.name;
document.getElementById("fileSize").textContent = "(" + file.size + "byte)";


다음은 FileReader 를 생성하여 사용하는 방법입니다.
var reader = new FileReader();


19-6. 예제

이젠 위 내용들을 바탕으로 예제를 살펴보겠습니다.
아래 예제는 File interface 와 FileReader interface 를 사용하여 File 을 선택하여 File 의 이름과 Size 를 표시하고, File 의 내용을 읽어 TextBox 에 표시합니다.
<!DOCTYPE html>
    <head>
        <title>HTML5 File API Test</title>
        <meta charset="utf-8" />
    </head>
    <script>
        function readFile() {
            var file = document.getElementById("file").files[0];

            document.getElementById("fileName").textContent = file.name;
            document.getElementById("fileSize").textContent = "(" + file.size + "byte)";

            var reader = new FileReader();

            reader.onload = function() {
                var display = document.getElementById("content");
                display.textContent = reader.result;
            };

            reader.onerror = function(evt) {
                alert(evt.target.error.code);
            };

            var encodingList = document.getElementById("encoding");
            var encoding = encodingList.options[encodingList.selectedIndex].value;  
          
            reader.readAsText(file, encoding);

        };
    </script>
    <body>
        <h1>HTML5 File API 테스트</h1>
        <select id="encoding">
            <option>UTF-8</option>
        </select>
        <button onclick="readFile()">읽기</button><br />
        <div>
            <span id="fileName">File Name</span>
            <span id="fileSize">File Size</span>
        </div>
        <textarea id="content" readonly style="width:600px; height:400px;"></textarea>
    </body>
</html>


위 파일은 저장할 때 UTF-8 방식으로 저장해 주십시요. 읽을 때 Encoding 을 UTF-8 로 읽겠다고 했으니 말이죠...

Web Page 를 실행시키고 위 파일을 다시 읽어봤습니다.


여러분들께서도 한번 작성하시고 실행시켜보십시요.

비동기 방식의 FileReaderSync 도 있습니다만 Worker 안에서 사용해야하고 FileReader 보다는 간단하다는 특징이 있습니다.
다른 사항들은 거의 비슷하므로 접근하기는 비동기방식의 FileReader보다 훨씬 쉬우실 것입니다.


이제까지 File API 를 살펴보았습니다.
이젠 Web Page 에서 내 PC 의 File 을 읽기위해서 File 을 서버로 Upload 할 필요가 없습니다.
그만큼 Server 의 부하도 줄일수 있겠고, Upload 하고 File 을 읽고 다시 읽은 Streaming 을 내 PC 로 받는 그런 진행되는 동안의 대기 시간이 줄어들 것입니다.


위의 내용들은
혁명을 꿈꾸다 HTML5 & API 입문
을 참고 하였습니다.



행복한 고수되십시요.


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\


[HTML 5] 1. HTML 5 의 개요
[HTML 5] 2. HTML4 vs HTML5 (1)
[HTML 5] 3. HTML4 vs HTML5 (2)
[HTML 5] 4. Sementic Element (1)
[HTML 5] 5. Sementic Element (2)
[HTML 5] 6. Strong Web Form
[HTML 5] 7. Rich Text Edit API
[HTML 5] 8. Video Element
[HTML 5] 9. Audio Element
[HTML 5] 10. Canvas Element
[HTML 5] 11. Drag & Drop API
[HTML 5] 12. Offline Web Application
[HTML 5] 13. Communication API
[HTML 5] 14. Web Storage
[HTML 5] 15. Web SQL Database
[HTML 5] 16. Web Worker
[HTML 5] 17. Web Socket
[HTML 5] 18. Geolocation API
[HTML 5] 19. SVG
[HTML 5] 20. File API


[HTML 5] 1. HTML 5 개요 - 동영상
[HTML 5] 2. HTML4 vs HTML5 (1) - 동영상
[HTML 5] 3. HTML4 vs HTML5 (2) - 동영상
[HTML 5] 4. Sementic Element (1) - 동영상
[HTML 5] 5. Sementic Element (2) - 동영상
[HTML 5] 6. Strong Web Form - 동영상
[HTML 5] 7. Rich Text Edit API - 동영상
[HTML 5] 8. Video Element - 동영상
[HTML 5] 9. Audio Element - 동영상
[HTML 5] 10. Canvas Element - 동영상
[HTML 5] 11. Drag & Drop API - 동영상
[HTML 5] 12. Offline Web Application - 동영상
[HTML 5] 13. Communication API - 동영상
[HTML 5] 14. Web Storage - 동영상
[HTML 5] 15. Web SQL Database - 동영상
[HTML 5] 16. Web Worker - 동영상
[HTML 5] 17. Web Socket - 동영상
[HTML 5] 18. Geolocation API - 동영상
[HTML 5] 19. SVG - 동영상
[HTML 5] 20. File API - 동영상



반응형

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 2. HTML4 vs HTML5 (1) - 동영상  (0) 2011.07.15
[HTML 5] 1. HTML 5 개요 - 동영상  (0) 2011.07.15
[HTML 5] 19. SVG  (0) 2011.06.29
[HTML 5] 18. Geolocation API  (0) 2011.06.27
[HTML 5] 17. Web Socket  (1) 2011.06.25

+ Recent posts