1006_JavaScript : File, FileReader interface 파일관련인터페이스들

1006_JavaScript : File, FileReader interface 파일관련인터페이스들

File interface

- File 인터페이스는 파일에 대한 정보를 제공하고, 웹 페이지의 JavaScript가 해당 내용에 접근할 수 있는 방법을 제공한다.

- File 객체는 보통 FileList 객체에서 가져올 수 있다.

- FileList 객체는 사용자가 요소에서 파일을 선택했을 때, 드래그 앤 드롭 작업의 DtaTransfer 객체, 그리고 HTMLCanvasElemnt의 mozGetAsFile() API 에서 반환한다.

- File 객체는 특정 종류의 Blob이며, Blob을 사용할 수 있는 모든 맥락에서 사용할 수 있다.

FileReader, URL.createObjectURL(), createImageBitmap(), XMLHttpRequest.send()는 Blob과 File을 모두 허용한다.

File interface 생성자 및 주요 속성

- File() : 새로 생성한 File을 반환

- name : File 객체가 참조하는 파일의 이름을 반환

- type : File의 MIME 유형을 반환(알 수 없을 때는 null)

- size File의 크기를 바이트 단위로 반환

FileReader interface : File의 내용을 읽을 수 있는 기능을 제공한다.

주요 속성 및 메소드

- readAsBinaryString(fileBlob) : File 내용을 읽어 Binary 문자열로 저장

- readAsText(fileBlob, encoding) : File 내용을 읽어들여 문자열로 저장, 두번째 인수는 File의 문자 encoding을 지정할 수 있음. (기본값 : 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에 대응

FileList

- HTML 엘리먼트의 files 속성으로부터 반환되며, 엘리먼트로 선택된 파일의 리스트에 접근하도록 한다.

- 드래그 앤 드랍 API를 사용할 때 웹 컨텐트에 드랍된 파일의 리스트에도 사용된다.

주요 속성 및 메소드

- length : 목록에 있는 파일의 수

- File item(index) : 파일리스트의 지정된 인덱스에 있는 파일을 나타내는 File 객체를 리턴

예제 - 파일 용량 체크

더보기 Insert title here function checkFilesize(file) { var maxSize = 10*1024*1024; // 10M var fileSize = file.files[0].size; // multiple="multiple"로 파일을 여러 개 선택할 수 있음. 따라서 배열 console.log(fileSize+" bytes."); return maxSize >= fileSize; } function send() { var f = document.myForm; if(! f.selectFile.value ) { alert("파일을 선택하세요..."); f.selectFile.focus(); return; } if(! checkFilesize(f.selectFile) ) { alert("파일은 최대 10M까지 업로드 가능합니다.") f.selectFile.focus(); return; } alert("서버 전송..."); } 파일 용량 체크 등록하기

예제 - FileList

더보기 Insert title here File List var fileList = function() { var fileInput = document.querySelector('#myFiles'); // 홑따옴표사용해야함 var files = fileInput.files; for(var i=0; i

예제 - text File읽기

더보기 Insert title here function readFile(inputs) { if(! inputs.value) { return; } var f = inputs.files[0]; var reader = new FileReader(); // 파일의 내용을 읽을 수 있는 기능 제공 reader.onload = function(e) { // 읽어 들이기에 성공할 때 호출되는 이벤트 핸들러 console.log(e.target.result); // result : 파일의 내용 }; reader.readAsText(f); // utf-8 // reader.readAsTest(f, "euc-kr"); // euc-kr } text File 읽기

예제 - 이미지 파일 업로드 전 미리보기

더보기 Insert title here .image-preViewer { width: 200px; height: 200px; margin-top: 5px; margin-bottom: 5px; } .image-preViewer img { max-width: 100%; } function isValidImageFile(filename) { var p = /(\.gif|\.jpg|\.jpeg|\.png)$/i; return p.test(filename); } function imagePreview(inputs) { var f = inputs.files[0]; // 이미지 파일이 아닌 경우 if(! f.type.match("image.*")) { inputs.focus(); return; } var reader = new FileReader(); reader.onload = function(e) { document.getElementById("imgPreView").setAttribute("src", e.target.result); }; reader.readAsDataURL(f); } function sendOk() { var f = document.frm; if(! f.selectFile.value) { alert("파일을 선택하세요."); f.selectFile.focus(); return; } if(! isValidImageFile(f.selectFile.value) ) { alert("이미지 파일만 가능합니다."); f.selectFile.value.focus(); return; } alert("ok"); } 이미지 미리보기 등록하기

from http://development-writing.tistory.com/316 by ccl(S) rewrite - 2021-10-07 05:27:38