HTML5 file api 정리 fileReader

html5 fileReader를 검색하면서 내용이 생각보다 간단하여 정리해둔다..

이미 정리된 글들이 있지만 익혀둘겸 하나씩 해본다.. 감성프로그래밍(?)님의 블로그를 참고.

대부분 브라우저도 지원하는걸 보니 쓰기좋아보인다. https://caniuse.com/#feat=filereader

크게 3가지만 정리...

1. 텍스트파일 읽기

2. 이미지파일 읽기

3. 이미지파일 읽어 썸네일생성

1. 텍스트파일 읽기

pre태그는 단순히 읽은파일의 텍스트를 출력하기 위한영역.

input태그에서 accept="text/*" 로 설정하면 텍스트기준으로 선택할수있는데

선택창에서 모든파일보기하면 다른파일도 읽히긴한다. 이미지를 읽을경우 깨진다..

readAsText메소드로 읽어둔 후 로드가 완료되면 뿌려준걸 볼 수 있다.

2. 이미지파일 읽기

텍스트읽기와 차이는 accept="image/*"속성의 차이와

readAsDataURL메소드 사용시 DATA URI를 얻어서 img태그의 src속성에 넣어주면 이미지가 출력된다.

기존엔 서버에 던져서 url까지 받아와야 미리보기로 보여주곤 했는데.

단순히 미리보여주기만 할땐 이런식으로 하면 훨씬 편할것같다.

서버에 파일보관이 필요없는 프로모션에서 DATA URI자체를 DB에 저장하면 될것같다.

DATA URI는 4가지 파트(data:[<mediatype>][;base64],<data>)로 구성되며 딱히 자세히 알필요는 없기에..

3. 이미지파일 읽어서 썸네일 생성하기

이미지 파일 읽기에서 썸네일 출력영역과 다운로드위한 a태그가 추가되었다.

readAsDataURL로 파일을 읽어서 로드가 되면 #print영역에 DATA URI형태인 result값을 뿌리고, 

썸네일을 만들기 시작하는데...

1. 새로운변수 tempImage를 만들어 image객체를 담아주고

2. 처음에 읽은 DATA URI형태의 result값으로 src 속성값을 초기화했다.

3. tempImage가 로드가 되면 100x100사이즈로 캔버스를 생성하고 drawImage(this, 0, 0, 100, 100)으로

4. 캔버스에 this(tempImage자체)를 넘겨 x좌표 0 y좌표 0 가로 100 세로 100으로 draw했다.

여기까지가 캔버스로 100x100의 썸네일을 스크립트단에서 생성한거고

5. var dataURI = canvas.toDataURL("image/jpeg")로 캔버스를 DATA URI화 하여 변수에 담은걸 볼 수 있다.

6. 이어서 a링크의 href와 썸네일영역의 src도 canvas를 DATA URI화 한것으로 세팅하여

결국 썸네일이 그려지고, a링크를 누르면 해당 썸네일을 다운받을수 있게 되었다.

a태그의 download속성을 설정하면 해당 값으로 다운로드이름이 표시된다고 한다.