상세 컨텐츠

본문 제목

html5 자바스크립트 파일읽기 관련 파일 IO 보안 관련

WEB/html5

by AlrepondTech 2016. 6. 16. 12:07

본문

반응형
728x170



//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


출처: http://www.sqler.com/402253



안녕하세요?

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

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

20-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에 한정되므로 안심해도 좋을 것입니다. 





20-2. File interface

File interface 가 가지고 있는 속성과 함수는 다음과 같습니다.

Attribute/Method
설명
nameFile 이름
typeFile 의 MIME Type(알수 없을때는 null)
urnFile 의 범용 식별자
sizeFile Size
slice(start, length)시작위치와 끝 위치를 지정하여 파일의 내용을 잘라내 새로운 Blob객체를 만드는 함수

위 사항들은 아래 예제에서 사용법을 확인하실 수 있을 것입니다.

20-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 내용
errorerror 발생시의 error 정보
onload읽어들이기에 성공 했을 때 호출하는 event handler. load event 에 대응
onprogress읽어들이기의 진행 상황을 얻을 수있는 event handler. progress event 에 대응
onerror읽어들이기 error 시에 호출되는 event handler. error event 에 대응.


20-4. Error

다음은 FileReader 가 동작하는 중에 발생하는 Error 에 대한 상수값들입니다.

상수Code설명
NOT_FOUND_ERR1읽을 File 을 찾지 못할때
SECURITY_ERR2Web Application 이 Access 하기에 안전하지 못한 File일 때
File 에 너무 많은 읽기 호출이 있을 때
사용자의 선택한 이후에 File 에 변경이 있을 때 
인 상황에서 사용할 수 있습니다.
ABORT_ERR3예를 들어 abort() 함수 호출과 같은 것으로 인해 읽기가 중지되었을 때
NOT_READABLE_ERR4File 접근 권한 문제와 같은 것으로 인해 File 을 읽지 못할때
ENCODING_ERR5동기적, 비동기적으로 readAsText() 함수를 사용할 때는 사용할 수없습니다.
DataURL FH 로 표현될 수 있는 File 이나 Blob 을 구현한 제한된 곳의 DataURL 에 대한 URL 길이 제한에 걸렸을 때




20-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();



20-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>
       <input id="file" type="file">
       
<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 입문
을 참고 하였습니다.


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



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




행복한 고수되십시요.


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



////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////



출처: http://deviant86.tistory.com/490






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

File interface 가 가지고 있는 속성과 함수
 Attribute/Method   설명   
 name    File 이름   
 type    File 의 MIME Type(알수 없을때는 null)   
 urn    File 의 범용 식별자   
 size   File Size   
 slice(start, length)   시작위치와 끝 위치를 지정하여 파일의 내용을 잘라내 
 새로운 Blob객체를 만드는 함수
  

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 에 대응.
 

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

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(); 


ex)
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>FILE API EXAMPLE</TITLE>
<meat charset="utf-8">
<script type="text/javascript">
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){
var errcode = evt.target.error.code;
if(errcode == 1){
alert("File을 찾지 못하였습니다");
}else if(errcode == 2){
alert("안전하지 못하거나 File에 변경이 있습니다");
}else if(errcode == 3){
alert("읽기가 중지되었습니다");
}else if(errcode == 4){
alert("접근권한 문제로 파일을 읽지 못하였습니다");
}else if(errcode == 5){
alert("URL 길이 제한문제");
}
};

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

reader.readAsText(file, encoding);
}
</script>
</HEAD>
<BODY>
<input type="file" id="file"/>
<select id="encoding">
<option>UTF-8</option>
</select>
<button onclick="readFile()">read</button><br/>
<div>
<span id="fileName">File Name</span>
<span id="fileSize">File Size</span>
</div>
<textarea id="content" style="width:600px; height:400px;" readonly></textarea>
</BODY>
</HTML>


///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////






반응형
그리드형


관련글 더보기

댓글 영역