| sitelink1 | http://kiara77.tistory.com/225 |
|---|
HTML5 강좌 22강 - 파일접근, 파일정보
파일을 읽고, 파일에 대한 정보를 읽는 파일접근에 대해 알아보도록 하겠습니다.
1. 파일 접근
(1)파일의 데이터에 대한 직접 읽기가 가능
(수정/삭제 불가)
(2)읽기 가능한 파일
-사용자가 드래그 앤 드롭한 파일
-input 요소(type=“file”)에서 선택한 파일
2. 파일 정보
(1)선택한 파일의 객체를 구함
-선택한 파일에 대해 속성/메소드 사용
(2)FileList 객체
선택한 파일의 객체가 저장되어 있는 객체
-> 배열 형식, 인덱스 사용
파일 객체를 가져올 수 있는 경우
-> 드래그 앤 드롭에서 드롭 이벤트가 발생할 경우
->input 요소 사용 시 change 이벤트가 발생할 경우
파일의 이름을 읽는 예제
<input id="file" type="file" onchange="filecheck()">
파일을 불러오는 태그를 사용하였고
onchange 이벤트를 통해 변화가 생기면 filecheck()라는 함수를 호출합니다.
function filecheck() {
var file = document.getElementById("file").files[0];
alert("파일 이름 : " + file.name);
}
file 이라는 변수에 file이라는 아이디를 가진 객체의 파일정보 0번을 가져옵니다.
[0] : 이것은 배열인데 숫자 입력으로 인덱스를 구분합니다.
[1], [2], [3] 이런식으로 말이죠.
[] 안의 숫자를 바꾸면서 테스트를 해보세요.
3. 파일 정보 가져오기
(1)name : 파일 이름
(2)type : 파일 속성 (파일의 MIME 타입, 알 수 없을 때는 null)
(3)size : 파일 크기
(4)lastModifiedDate : 파일이 마지막으로 수정된 시간
(5)slice(start, length) : 파일 데이터의 start 위치부터 length만큼의 파일 내용을 잘라 새로운 Blob 객체를 만드는 함수
파일 정보 가져오기 예제
<input id="file" type="file"> <input type="button" onclick="fileinfo()" value="파일 정보 확인"><br>
<table id="table"></table>
파일에 접근하는 파일 태그를 사용했고요.
버튼을 클릭하면 파일정보를 출력하도록 합니다.
출력은 빈 테이블에 하겠습니다.
function fileinfo() {
var file = document.getElementById("file").files[0];
document.getElementById("table").innerHTML = "<tr><td> 파일 이름 </td><td>" + file.name + "</td></tr>";
document.getElementById("table").innerHTML += "<tr><td> 파일 크기 </td><td>" + file.size + "</td></tr>";
document.getElementById("table").innerHTML += "<tr><td> 파일 타입 </td><td>" + file.type + "</td></tr>";
document.getElementById("table").innerHTML += "<tr><td> 파일 수정 날짜 </td><td>" + file.lastModifiedDate + "</td></tr>";
}
이번에는 innerHTML 코드가 여러번 들어갔네요.
innerHTML을 사용하면 원하는 위치에 HTML 코드를 삽입할 수 있습니다.
innerHTML을 사용하여 테이블의 tr td 요소들을 만들고 파일정보를 출력합니다.
임의로 파일을 하나 불러왔습니다.
이번엔 파일의 내용을 출력해 보겠습니다.
위와같이 파일의 크기 및 정보들이 출력이 됩니다.
4. 파일 내용 읽기
(1)FileReader 객체 생성하기
var 변수 = new FileReader();
(2)객체의 메소드를 사용하여 문자열로 변환하여 저장하기
(3)이벤트 처리를 통해 변환/저장된 파일의 내용을 반환 받기
*FileReader 객체의 메소드 및 속성
-readAsBinaryString(file) : 파일의 내용을 읽어 Binary 문자열로 저장
-readAsText(file, encoding) : 파일의 내용을 읽어 지정한 인코딩 방식의 문자열로 저장 (기본: UTF-8)
-readAsDataURL(file) : 파일의 내용을 읽어 Data URL 형식의 문자열로 저장
-abort() : 파일 읽기 중지
-result : 읽어 들인 파일 내용
*FileReader 객체와 관련된 이벤트 핸들러
-onload : 파일 읽기에 성공하였을 경우에 호출
-onprogess : 파일을 읽고 있는 중에 호출
-onerror : 파일을 읽는 중에 오류가 발생하였을 경우에 호출
*파일 내용 읽기의 기본 형태
var file = document.getElementById("file").files[0];
//FileReader 객체 생성
var reader = new FileReader();
//파일을 UTF-8 형식으로 변환하여 저장
reader.readAsText(file);
//파일 읽기에 성공하였을 경우에 대한 처리
reader.onload = function () {
var view = reader.result;
…
…
}
*FileReader 객체의 오류 값
NOT_FOUND_ERR : 읽을 파일을 찾지 못할 때 -> 값 : 1
SECURITY_ERR : 보안상 안전하지 못하거나, 사용자가 파일을 선택한 후 파일에 변경이 있을 때 -> 값 : 2
ABORT_ERR : 읽기가 중지되었을 때 -> 값 : 3
NOT_READABLE_ERR : 파일 권한 등으로 인하여 파일에 접근할 수 없을 때 -> 값 : 4
ENCODING_ERR : Data URL 길이가 URL 길이의 상한을 초과할 때 -> 값 : 5
파일 내용 읽기 예제
<input id="file" type="file">
<input type="button" onclick="fileinfo()" value="파일 내용 확인"><br><br>
<textarea id="content" readonly style="width:600px; height:500px;"></textarea>
위 코드는 파일을 읽고 내용을 출력하기 위한 영역입니다.
function fileinfo() {
var file = document.getElementById("file").files[0];
var reader = new FileReader();
reader.readAsText(file, "utf-8");
reader.onload = function() {
var view = document.getElementById("content");
view.textContent = reader.result;
};
reader.onerror = function(event) {
switch(event.target.error.code) {
case error.NOT_FOUND_ERR: alert("읽을 파일을 찾지 못하였습니다.."); break;
case error.SECURITY_ERR: alert("보안상 안전하지 않습니다.."); break;
case error.ABORT_ERR: alert("읽기가 중지되었습니다."); break;
case error.NOT_READABLE_ERR: alert("읽기 권한이 없습니다."); break;
case error.ENCODING_ERR: alert("파일 용량이 상한을 초과하였습니다."); break;
}
};
}
위 자바스크립트 코드에 switch 문장이 있네요.
에러를 출력하기 위해 사용한 switch 문장은 event 에러값을 변수로 받아
에러의 내용에 따라 에러내용을 출력해주는 코드입니다.
모든 코드는 직접 코딩하면서 테스트를 해보세요 :)
예제파일 다운로드
