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

+ Recent posts

티스토리툴바