html5 문법 (6) 파일업로드

(6) 파일 업로드

파일을 업로드하는 부분은 서버나 데이터베이스와 직접적으로 연관이 되는 중요한 파트이다. 사용자가 직접 뭔가(?)를 만들어 볼 수 있는 어플리케이션을 개발하려면 '파일 업로드'는 필수다.

서버에서는 사용자가 올린 파일을 조작하는 작업이 이뤄져야 하고, 프론트에서는 사용자가 원하는 파일을 자유롭게 업로드하고 다룰 수 있도록 설계되어야 한다.

 1 파일 정보 획득하기

---

[예제]

<form>

<label for="file">파일:</label>

<input type="file" name="file" id="file" multiple/>

</form>

<script type="text/javascript">

window.addEventListener('DOMContentLoaded',function( ){

document.getElementById('file').addEventListener('change',function( ){

var inputs = document.getElementById('file').files;

for(let input of inputs){

console.log('파일타입:'+input.type);

console.log('파일명:'+input.name);

console.log('파일사이즈:'+input.size);

console.log('파일갱신일:'+input.lastModifiedDate);

}

})

});

</script> 

---

웹 브라우저는 File관련 내장객체가 있다. 

속성	의미
name	파일명
type	파일 확장자
size	파일 크기
lastModifiedDate	최종 갱신일

2 텍스트 파일 내용

게시판 웹을 제작할 때, 대부분 이미지 아래에 파일 갱신일, 파일명, 파일타입을 게재한다. 이때 사용자가 이미지를 클릭해서 파일을 읽으려면, 파일 내용을 읽을 수 있는 메서드가 호출되어야 한다. 지금부터는 파일 클래스를 상속받아서 기능을 활용하는 예제를 살펴보자.

---

[예제]

<form>

<label for="file">파일:</label>

<input type="file" id="file" multiple/>

</form>

<div id='result'>

</div>

<script type="text/javascript">

window.addEventListener('DOMContentLoaded',function( ){

document.getElementById('file').addEventListener('change',function( ){

var inputs = document.getElementById('file').files;

var reader = new FileReader( );

reader.addEventListener('load',function( ){

document.getElementById('result').textContent = reader.result;

});

reader.addEventListener('error',function( ){

console.log(reader.error.message);

});

for(let input of inputs){

reader.readAsText(input,'UTF-8');

}

})

});

</script>

---

위에서 주의깊게 봐야할 부분은 'var reader = new FileReader( )' 부분과reader.readAsText( input, 'UTF-8' )이다. reader변수는 FileReader( )  클래스(프로토타입 객체)를 상속받는다. (인스턴스 생성)

.result 는, 업로딩 된 파일의 결과값을 반환함을 의미한다. .readAsText( ) 메소드는 input(파일)과 charset을 받아서 파일 내용을 읽는 역할을 한다. readAsText( )메소드가 실행되어야만 .result로 파일 결과값을 반환할 수 있다.

3 바이너리 파일 획득 

바이너리 파일은 text가 아닌 코드로 이뤄진 파일들을 말한다. 바이너리 파일을 웹에서 읽는 방법은 URL을 경로 그대로 저장해뒀다가 src 속성값으로 넣는 방법이 있다. 아래 예제에서는 readAsDataURL( ) 메서드가 핵심이다.

reader변수에 new FileReader( ) 클래스를 상속받고, reader에 load 이벤트가 발생하면, img태그의 src 속성으로 reader.result를 넣는다. reader에는 readAsDataURL( )메소드로 input을 전달한다.

[예제]

<form>

<label for='file'>파일:</label>

<input type="file" name="file" id="file">

</form>

<hr/>

<img id="result">

<script type="text/javascript">

window.addEventListener('DOMContentLoaded',function( ){

document.getElementById('file').addEventListener('change',function( ){

var input = document.getElementById('file').files[0];

var reader = new FileReader( );

reader.addEventListener('load',function(e){

document.getElementById('result').src = reader.result;

});

reader.readAsDataURL(input);

});

});

</script>

 

---