Chapter13 파일 접근 & 오프라인 접근 HTML5 Programming
Contents Chapter13 1. 파일 접근 2. 오프라인 접근 파일 접근 & 오프라인 접근
파일 접근 Chapter13 파일 접근 사용자가 드래그 앤 드롭을 한 파일이나 input 요소의 type 속성을 file로 지정하여 선택한 파일에 한해서만 접근이 가능 웹에서 읽기 전용으로 파일에 접근하기 때문에 파일의 수정이나 삭제는 할 수 없음 브라우저 지원 현황 파일 접근 & 오프라인 접근
파일 정보 Chapter13 파일 정보 선택한 파일의 객체를 구한 다음 선택한 파일에 대하여 속성이나 메서드를 사용하여 파일 정보를 알아 낼 수 있음 정보를 알고자 하는 파일의 객체를 구하기 위해서는 우선 선택한 파일의 객체가 저장되어 있는 FileList 객체를 구해야 함 FileList 객체는 배열 형식으로 되어 있으므로 인덱스를 지정하여 파일 객체를 가져올 수 있음 파일 접근 & 오프라인 접근
파일 정보 Chapter13 파일 정보 파일 접근 & 오프라인 접근
파일 정보 Chapter13 파일 정보 관련된 메서드 및 속성 파일 접근 & 오프라인 접근
프로그램 13-1 Chapter13 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 파일 </title> 06: <script type="text/javascript"> 07: function fileinfo() 08: { 09: var file = document.getElementById("file").files[0]; 10: 11: document.getElementById("table").innerHTML = 12: "<tr><td> 파일 이름 </td><td>" + file.name + "</td></tr>"; 13: document.getElementById("table").innerHTML += 14: "<tr><td> 파일 크기 </td><td>" + file.size + "</td></tr>"; 15: document.getElementById("table").innerHTML += 16: "<tr><td> 파일 타입 </td><td>" + file.type + "</td></tr>"; 17: document.getElementById("table").innerHTML += 18: "<tr><td> 파일 수정 날짜 </td><td>" + 19: file.lastModifiedDate + "</td></tr>"; 20: } 21: </script> 22: </head> 23: <body> 24: <input id="file" type="file"> 25: <input type="button" onclick="fileinfo()" value="파일 정보 확인"><br> 26: <table id="table"></table> 27: </body> 28: </html> 파일 접근 & 오프라인 접근
프로그램 13-1 Chapter13 파일 접근 & 오프라인 접근
파일 내용 파일 내용 파일의 내용을 읽기 위해서는 FileReader 객체를 사용해야 함 Chapter13 파일 내용 파일의 내용을 읽기 위해서는 FileReader 객체를 사용해야 함 FileReader 객체를 구한 후에는 객체의 메서드를 사용하여 파일을 읽을 수 있음 파일 접근 & 오프라인 접근
파일 내용 Chapter13 파일 내용 파일 접근 & 오프라인 접근
파일 내용 파일 내용 FileReader 객체는 비동기적인 상황에서 사용하는 객체이므로 파일의 내용을 바로 반환하지 않음 Chapter13 파일 내용 FileReader 객체는 비동기적인 상황에서 사용하는 객체이므로 파일의 내용을 바로 반환하지 않음 변환하여 저장된 파일의 내용을 반환받기 위해서는 이벤트로 처리를 해야 함 파일 접근 & 오프라인 접근
파일 내용 Chapter13 파일 내용 파일 접근 & 오프라인 접근
파일 내용 Chapter13 파일 내용 에러는 onerror 이벤트를 사용하여 처리할 수 있음 파일 접근 & 오프라인 접근
프로그램 13-2 Chapter13 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8"> 05: <title> 파일 </title> 06: <script type="text/javascript"> 07: function fileinfo() 08: { 09: var file = document.getElementById("file").files[0]; 10: 11: var reader = new FileReader(); 12: reader.readAsText(file, "euc-jp"); 13: 14: reader.onload = function() 15: { 16: var view = document.getElementById("content"); 17: view.textContent = reader.result; 18: }; 19: 20: reader.onerror = function(event) 21: { 22: switch(event.target.error.code) 23: { 24: case error.NOT_FOUND_ERR: 25: alert("읽을 파일을 찾지 못하였습니다.."); 26: break; 27: case error.SECURITY_ERR: 28: alert("보안상 안전하지 않습니다.."); 29: break; 파일 접근 & 오프라인 접근
프로그램 13-2 Chapter13 30: case error.ABORT_ERR: 31: alert("읽기가 중지되었습니다."); 32: break; 33: case error.NOT_READABLE_ERR: 34: alert("읽기 권한이 없습니다."); 35: break; 36: case error.ENCODING_ERR: 37: alert("파일 용량이 상한을 초과하였습니다."); 38: break; 39: } 40: }; 41: } 42: </script> 43: </head> 44: <body> 45: <input id="file" type="file"> 46: <input type="button" onclick="fileinfo()" value="파일 내용 확인"><br><br> 47: <textarea id="content" readonly 48: style="width:500px; height:400px;"></textarea> 49: </body> 50: </html> 파일 접근 & 오프라인 접근
프로그램 13-2 Chapter13 파일 접근 & 오프라인 접근
오프라인 접근 Chapter13 오프라인 접근 일반적으로 어떠한 웹 사이트에 접근하여 정보를 확인하고 사용하려면 당연히 온라인 상태이어야 가능 함 파일 접근 & 오프라인 접근
오프라인 접근 오프라인 접근 오프라인 웹 애플리케이션 오프라인 상태에서도 사용이 가능한 것 Chapter13 오프라인 접근 오프라인 웹 애플리케이션 오프라인 상태에서도 사용이 가능한 것 오프라인에서도 사용이 가능한 것은 바로 웹에서 사용하는 여러 페이지와 파일들을 클라이언트에서 캐시로 저장하기 때문 캐시로 저장하여 사용하므로 웹 페이지의 접근이 빠르고 네트워크 접속이 줄어들어 모바일 기기에서는 효과적인 전원 관리가 가능 브라우저 지원 현황 파일 접근 & 오프라인 접근
오프라인 접근 Chapter13 파이어폭스에서 확인한 캐시 정보 파일 접근 & 오프라인 접근
매니페스트 파일 매니페스트 파일 파일들을 캐시로 저장하기 위해서 반드시 필요한 것 Chapter13 매니페스트 파일 파일들을 캐시로 저장하기 위해서 반드시 필요한 것 어떠한 파일을 캐시로 저장해야 하는지를 지정하며 서버로부터 웹 페이지들과 함께 다운로드 되는 파일 .manifest 확장자를 가진 파일 파일 접근 & 오프라인 접근
매니페스트 파일 Chapter13 매니페스트 파일 파일 접근 & 오프라인 접근
매니페스트 파일 매니페스트 파일 CACHE MANIFEST 부분 매니페스트 파일 작성시 반드시 포함되어야 하는 부분 Chapter13 매니페스트 파일 CACHE MANIFEST 부분 매니페스트 파일 작성시 반드시 포함되어야 하는 부분 CACHE 섹션 기본 값을 나타내는 부분 클라이언트에서 캐시되어야 할 파일들을 지정하는 부분 NETWORK 섹션 온라인 상태에서만 접근할 수 있는 파일들을 지정하는 부분 FALLBACK 섹션 대체되는 리소스를 지정하는 부분 다른 섹션 부분은 각 파일들의 이름을 한 줄에 하나씩 지정한 반면 FALLBACK 섹션은 좌우 쌍으로 2개 지정해야 함 파일 접근 & 오프라인 접근
매니페스트 파일 매니페스트 파일 파일의 MIME 타입을 서버의 mime.types 파일에 지정해야 함 Chapter13 매니페스트 파일 파일의 MIME 타입을 서버의 mime.types 파일에 지정해야 함 메인 페이지에 매니페스트 파일을 지정하면 해당 페이지 호출 이후부터 캐시가 동작하게 되는 것 파일 접근 & 오프라인 접근
매니페스트 파일 Chapter13 매니페스트 파일 파일 접근 & 오프라인 접근
매니페스트 파일 Chapter13 매니페스트 파일 파일 접근 & 오프라인 접근
매니페스트 파일 Chapter13 매니페스트 파일 파일 접근 & 오프라인 접근
이벤트 처리 이벤트 처리 더욱 세세한 동작 제어를 위해서는 각 이벤트나 캐시의 상태에 따라 처리를 해주어야 함 Chapter13 이벤트 처리 더욱 세세한 동작 제어를 위해서는 각 이벤트나 캐시의 상태에 따라 처리를 해주어야 함 애플리케이션 캐시에 접근하기 위해서는 applicationCache 객체를 사용 파일 접근 & 오프라인 접근
이벤트 처리 Chapter13 이벤트 처리 status 속성 파일 접근 & 오프라인 접근
이벤트 처리 Chapter13 이벤트 처리 파일 접근 & 오프라인 접근
이벤트 처리 Chapter13 이벤트 처리 applicationCache 객체에서 발생하는 이벤트 파일 접근 & 오프라인 접근