내 잔이 넘치나이다.

웹 페이지는 사용자의 컴퓨터에 저장된 파일을 강제로 들고 올 수 없습니다.

하지만, 사용자가 직접 웹 페이지 위에 올린 파일이라면 접근해서 조작할 수 있습니다.

HTML5부터는 파일을 읽고 저장하는 것이 가능합니다.

var fileInput = document.getElementById('file-input');

fileInput.onchange = function () {

var files = this.files;

};

File 객체 속성

name - 이름

type - 형식

size - 크기

lastModifiedDate - 최종 수정시점

FileReader 객체의 메소드

readAsArrayBuffer() - 파일을 Array Buffer 형태로 읽습니다.

readAsBinaryString() - 파일을 이진 문자열 형태로 읽습니다.

readAsDataURL() - 파일을 Data URL 형태로 읽습니다.

                            이미지 파일과 동영상 파일 같은 미디어 파일은 readAsDataURL()로 읽습니다.

예)           

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function () {

var image = document.createElement('img')

image.width = 400;

image.height = 300;

image.src = reader.result;

document.body.appendChild(image);

};

URL Object를 이용한 미디어 파일 제어

var objectURL = URL.createObjectURL(file);

[결과] blob으로 시작되는 URL 생성

<img src="blob:http%3A//localhost/d3adcd08-7fa1-4a9f-9709-4fa25735d25d">

* blob 객체를 사용하면 파일을 웹 브라우저가 관리합니다.

var file = files.item(i);

var objectURL = URL.createObjectURL(file);

var image = document.createElement('img')

image.width = 400;

image.height = 300;

image.src = objectURL;

document.body.appendChild(image);

readAsText() - 파일을 문자열 형태로 읽습니다.

Blob 객체

blob (binary large object) 객체는 용량이 큰 데이터를 다룰 때 사용하는 객체로 일반 파일과 다른 방식으로

운용됩니다.

HTML5의 blob 객체는 웹 페이지 내부에서 생성하지만 웹 브라우저가 관리합니다.

특정한 페이지에서 생성한 blob 객체는 다른 페이지에서도 접근할 수 있습니다.

따라서 여러 번 사용하는 미디어 파일을 생성할 때 사용합니다.

[생성자]

Blob Blob( 

[optional] Array parts, 

[optional] BlobPropertyBag properties 

);

예)

var blob = new Blob( ['Normal Text'], {type: 'text/plain'} );

URL.createObjectURL(blob);

blob 객체를 생성하면 URL.createObjectURL() 매소드로 웹 브라우저에 파일 관리를 요청합니다.

예)

var request = new XMLHttpRequest();

request.open('GET', URL.createObjectURL(blob), false);

request.send();