현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

Blob 객체는 파일과 흡사한 불변 객체로 raw data입니다. 데이터를 표현하기 때문에 필연적으로 자바스크립트 네이티브 포맷이 아닙니다. File 인터페이스는 기본적으로 Blob을 통해 이뤄지며, blob의 함수들을 상속받고 확장하여 사용자 시스템의 파일을 지원해줍니다.

Blob을 생성하는 가장 쉬운 방법으로는 Blob() 생성자를 호출하는 것입니다. 다른 방법으로는 slice()메서드를 사용하여 다른 blob의 부분 데이터로 구성된 blob을 만드는 것입니다. 사용자의 파일 시스템에있는 파일에 대한 Blob 객체를 가져 오려면 File 설명서를 참조하십시오.

Blob 객체를 받아들이는 API는 File 문서에도 나열되어 있습니다.

주의: slice() 메서드는 기본적으로 길이(length) 값을 두 번째 파라미터로 가져가며 이는 새로 생성 할 Blob의 byte 단위의 길이 값입니다. 만약 시작 바이트와 길이값을 초과하는 값을 파라미터로 준다면 리턴되는 Blob은 소스 Blob에서 시작과 끝을 포함하는 Blob이 될 것입니다. (역주: 복사와 동일한 결과) 
주의: slice()슬라이스 메서드 사용에 있어서  제조사와 버전 별  접두사가 붙어 있으니 주의해야 한다. blob.mozSlice() 는 Firefox 12와 더 이전 버전에서 쓰이며, Safari에서는 blob.webkitSlice()로 쓰인다.  더 오래전 버전의 slice() 메서드는 제조사별 접두사가 없으며 내부적으로 다른 의미를 지니고 있으며 구식이다.  또한 blob.mosZlice() 메서드는 Firefox 30 버전에서 삭제되었습니다.

생성자

Blob()
새로 생성된 Blob 객체를 반환합니다.  이는 파라미터로 주어진 값들의 연속적인 배열 형태입니다.

속성

Blob.size Read only
Blob 객체에 포함된 데이터의 바이트 단위의 사이즈를 의미한다. 
Blob.type Read only
Blob에 포함된 데이터의 MIME 타입을 의미한다. 만약 unknown으로 나올 경우, 이 문자열은 비어있는 것이다.

함수

Blob.slice()
새로운 Blob 객체를 반환한다. 반환되는 Blob 객체는 소스가 되는 Blob 객체에서 파라미터로 주어진 바이트 단위 만큼의 데이터를 포함하고 있다.

예제 

Blob 생성자 사용 예시

Blob() constructor는 다른 객체에서 blob을 만들수있게 합니다.

string에서 blob을 생성하려면 다음과 같습니다:

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});

blob 생성자를 사용할 수 있게 되기전에는 BlobBuilder API를 통해 이 작업을 수행할 수 있습니다. 이 API는 현재 사용되지 않습니다. (deprecated)

var builder = new BlobBuilder(); 
var fileParts = ['<a id="a"><b id="b">hey!</b></a>']; 
builder.append(fileParts[0]); 
var myBlob = builder.getBlob('text/xml');

blob을 사용해 typed array 만들기 예제 

아래 코드 참조:

var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here
var url = URL.createObjectURL(blob);
// url은 이런식이 될 것이다: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
// 이제 만들어낸 URL을 일반적인 URL 처럼 쓸 수 있다. 예를 들자면 img.src, 같은 곳 등.

Blob에서 데이터 추출 예제

Blob에서 데이터를 읽는 유일한 방법은 FileReader 를 사용하는 것이다. 아래의 코드는 Blob에서 typed array로 데이터를 가져오는 것을 다룬다.

var reader = new FileReader();
reader.addEventListener("loadend", function() {
   // reader.result는 blob에서 가져온 컨텐츠를 typed array로 갖고 있다. 
});
reader.readAsArrayBuffer(blob);

FileReader 에서 다른 메서드를 사용한다면, Blob에서 데이터를 string이나 URL 형태의 데이터도 읽어 올 수 있다.

명세서

명세서 상태 비고
File API
The definition of 'Blob' in that specification.
Working Draft 기초 정의(Initial definition.)

브라우저 호환성

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support5 Yes410115.1
Blob() constructor20 ?13110128
size512410115.1
type512410115.1
slice

21

5 — 21 webkit

12

132

5 — 13 moz

10125.1 webkit
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? Yes14 ? ? ?
Blob() constructor ? ? ?141 ? ? ?
size No No Yes No No No No
type No No Yes No No No No
slice ? ? Yes14 ? ? ?

1. Before Firefox 16, the second parameter, when set to null or undefined, leads to an error instead of being handled as an empty dictionary.

2. Prior to Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), there was a bug that affected the behavior of Blob.slice(); it did not work for start and end positions outside the range of signed 64-bit values; it has now been fixed to support unsigned 64-bit values.

같이 보기

문서 태그 및 공헌자

태그: 
이 페이지의 공헌자: limkukhyun, kuil09
최종 변경: limkukhyun,