File interface
- File 인터페이스는 파일에 대한 정보를 제공하고, 웹 페이지의 JavaScript가 해당 내용에 접근할 수 있는 방법을 제공한다.
- File 객체는 보통 FileList 객체에서 가져올 수 있다.
- FileList 객체는 사용자가 <input> 요소에서 파일을 선택했을 때, 드래그 앤 드롭 작업의 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 <input> 엘리먼트의 files 속성으로부터 반환되며, <input type="file"> 엘리먼트로 선택된 파일의 리스트에 접근하도록 한다.
- 드래그 앤 드랍 API를 사용할 때 웹 컨텐트에 드랍된 파일의 리스트에도 사용된다.
주요 속성 및 메소드
- length : 목록에 있는 파일의 수
- File item(index) : 파일리스트의 지정된 인덱스에 있는 파일을 나타내는 File 객체를 리턴
예제 - 파일 용량 체크
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
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("서버 전송...");
}
</script>
</head>
<body>
<h3>파일 용량 체크</h3>
<form name="myForm">
<p> <input type="file" name="selectFile"> </p>
<p>
<button type="button" onclick="send();">등록하기</button>
</p>
</form>
</body>
</html>
예제 - FileList
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>
<h3>File List</h3>
<p>
<input type="file" multiple="multiple" id="myFiles">
</p>
<script type="text/javascript">
var fileList = function() {
var fileInput = document.querySelector('#myFiles'); // 홑따옴표사용해야함
var files = fileInput.files;
for(var i=0; i<files.length; i++) {
var f = files[i];
console.log(f.name); // 파일 이름
}
};
document.querySelector('#myFiles').onchange = fileList;
</script>
</body>
</html>
예제 - text File읽기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
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
}
</script>
</head>
<body>
<h3> text File 읽기</h3>
<div>
<form name="frm">
<p>
<input type="file" name="selectFile" accept="text/*"
onchange="readFile(this)">
</p>
</form>
</div>
</body>
</html>
예제 - 이미지 파일 업로드 전 미리보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
.image-preViewer {
width: 200px; height: 200px; margin-top: 5px; margin-bottom: 5px;
}
.image-preViewer img {
max-width: 100%;
}
</style>
<script type="text/javascript">
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");
}
</script>
</head>
<body>
<h3>이미지 미리보기</h3>
<div style="margin: 5px;">
<form name="frm">
<p>
<!--<input type="file" name="selectFile" onchange="imagePreview(this)"> -->
<input type="file" name="selectFile" accept="image/*" onchange="imagePreview(this)">
</p>
<div class="image-preViewer">
<img id="imgPreView">
</div>
<p>
<button type="button" onclick="sendOk()">등록하기</button>
</p>
</form>
</div>
</body>
</html>'쌍용강북교육센터 > 10월' 카테고리의 다른 글
| 1006_ JavaScript : ip 기반 위도 경도 확인 (0) | 2021.10.07 |
|---|---|
| 1006_JavaScript : 웹 스토리지(Web Storage) (0) | 2021.10.07 |
| 1006_JavaScript : DOM (Document Object Model) 문서 객체 모델 (0) | 2021.10.07 |
| 1005_JavaScript : 정규식(정규 표현식) Regular Expression (0) | 2021.10.05 |
| 1005_JavaScript : 쪽지보낼 사람 선택하기 (0) | 2021.10.05 |
