JavaScript プログラミング講座


Blob と File クラスについて



・Blob と File クラスについて
・Blob オブジェクトを作成する
・File オブジェクトを取得する
・File クラスのプロパティについて
・File クラスのメソッドについて

前のページに戻る

　

Blob と File クラスについて

　


■File クラスについて


File クラスは、HTML5 世代の機能です。
　
http://www.w3.org/TR/FileAPI/ (Working Draft)
　
■File クラスについて
　
File オブジェクトは、特定の１つのファイルと紐付けされています。
　
該当するファイルに、実際に読み取りアクセスできる権限が与えられています。
　
■Blob クラスについて

Blob クラスは、File クラスの原型となるクラスです。
　
Blob オブジェクトは、特定のファイルへのアクセス権限はありません。
　
Blob オブジェクトは、「コンテンツタイプ情報」と「バッファ情報」の２つを内包する事ができます。
　
１つの仮想的なファイル（小塊）として取り扱う事ができます。
　
Blob クラスには、複数のデータを結合したり、部分的にスライスする、簡易的な機能もあります。
　
■ File インターフェースの派生について

File インターフェースは、以下の様に派生しています。
　
Blob
↓派生
File
　

■ブラウザが File クラスをサポートしているか調べる

　
ブラウザが、File クラスをサポートしているか調べるには、window.File が真であるか比較します。
　
InternetExplorer 9 以前では、対応していません。
　
　

■ローカルファイルの中身に読み取りアクセスする

　
Blob や File クラスには、読み取りアクセスする機能が存在しません。
　
ファイルの中身に、読み取りアクセスするには、別途 FileReader クラスを使用します。
　
FileReader クラスについては、こちらで解説しています。
　

■ローカルファイルをリソースとして活用する

　
Blob オブジェクトを、リソースとして活用するには、Blob URL Scheme を使用します。
　
例えば、ローカルにある画像ファイルを、<IMG> 要素に表示する事ができます。
　
Blob URL Scheme ついては、こちらで解説しています。
　

上に戻る

　

Blob オブジェクトを作成する

　


■Blob オブジェクトを作成する


■Blob オブジェクトを作成する
　
new 演算子を使って、Blob オブジェクトを作成します。
　
Blob コンストラクタは、Internet Explorer 9 以前では、対応していません。
　
Blob コンストラクタは、Safari 5 以前では、対応していません。
　
new Blob ( [バッファデータ] , {オプション} ) :Blob
第01引数(略可)Arrayバッファデータを配列に格納して指定する。複数のデータを指定すると、内部で昇順に結合され１つのバッファとなる。
第02引数(略可)Objectオプション情報をオブジェクト形式で指定する。
戻り値 BlobBlob オブジェクトが得られる。
　
■第01引数（バッファデータ）
　
第01引数から、Blob オブジェクトに格納したいバッファデータを、配列に格納して指定します。
　
複数のデータを格納すると、内部で昇順に結合されます。
　
配列に格納できるデータ形式は、以下の通りです。
　
型備考
ArrayBuffer内部で保有するバッファ全体。
TypedArray内部で保有するバッファのうち、アクセス可能な範囲内のみ。
Blob内部で保有するバッファ全体。
StringUTF-8 形式のバイナリに変換される。（第02引数で別の文字セットを指定しても必ず、UTF-8 形式となるので注意）
その他文字列型に変換される。
　
■第02引数（オプション）
　
この設定は、Blob URL Scheme を生成する際に、重要なパラメータとなります。
　
新規にオブジェクトを作成し、以下のプロパティを追加します。
　
プロパティ名型説明
typeStringコンテンツタイプを指定する。
　
■作成例
　
Blob オブジェクトを作成（中身が空）

// Blob オブジェクトを作成（中身が空）
var blob = new Blob();

// 出力テスト
console.log(blob);
　
Blob オブジェクトを作成（UTF-8 形式のプレーンテキスト）

// ------------------------------------------------------------
// Blob オブジェクトを作成（UTF-8 形式のプレーンテキスト）
// ------------------------------------------------------------
var blob = new Blob(["文字列テスト"] , {type:"text/plain"});

// 出力テスト
console.log(blob);


// ------------------------------------------------------------
// Blob オブジェクト内のバッファに読み取りアクセスする
// ------------------------------------------------------------
// FileReader オブジェクトを生成
var file_reader = new FileReader();

// 読み込み成功時に実行されるイベント
file_reader.onload = function(e){
	// 出力テスト
	console.log(file_reader.result); // "文字列テスト"
};

// 読み込みを開始する（テキスト文字列を得る）
file_reader.readAsText(blob);
　
Blob オブジェクトを作成（バイナリ形式）

// ------------------------------------------------------------
// 適当なバッファ
// ------------------------------------------------------------
var ary_u8 = new Uint8Array([0x00,0x01,0x02,0x03]);

// ------------------------------------------------------------
// Blob オブジェクトを作成（バイナリ形式）
// ------------------------------------------------------------
var blob = new Blob([ary_u8] , {type:"application/octet-stream"});

// 出力テスト
console.log(blob);


// ------------------------------------------------------------
// Blob オブジェクト内のバッファに読み取りアクセスする
// ------------------------------------------------------------
// FileReader オブジェクトを生成
var file_reader = new FileReader();

// 読み込み成功時に実行されるイベント
file_reader.onload = function(e){
	// Uint8Array オブジェクトを作成する
	var ary_u8 = new Uint8Array(file_reader.result);
	// 出力テスト
	console.log(ary_u8); // [0x00,0x01,0x02,0x03]
};

// 読み込みを開始する（ArrayBuffer オブジェクトを得る）
file_reader.readAsArrayBuffer(blob);
　
複数のバッファを結合しつつ、Blob オブジェクトを作成（バイナリ形式）

// ------------------------------------------------------------
// 適当なバッファ
// ------------------------------------------------------------
var ary_u8_a = new Uint8Array([0x00,0x01,0x02,0x03]);
var ary_u8_b = new Uint8Array([0x04,0x05,0x06]);
var ary_u8_c = new Uint8Array([0x07,0x08]);

// ------------------------------------------------------------
// 複数のバッファを結合しつつ、Blob オブジェクトを作成（バイナリ形式）
// ------------------------------------------------------------
var blob = new Blob([ary_u8_a , ary_u8_b , ary_u8_c] , {type:"application/octet-stream"});


// ------------------------------------------------------------
// Blob オブジェクト内のバッファに読み取りアクセスする
// ------------------------------------------------------------
// FileReader オブジェクトを生成
var file_reader = new FileReader();

// 読み込み成功時に実行されるイベント
file_reader.onload = function(e){
	// Uint8Array オブジェクトを作成する
	var ary_u8 = new Uint8Array(file_reader.result);
	// 出力テスト
	console.log(ary_u8); // [0x00,0x01,0x02,0x03,0x04,0x05,0x06,0x07,0x08]
};

// 読み込みを開始する（ArrayBuffer オブジェクトを得る）
file_reader.readAsArrayBuffer(blob);
　

上に戻る

　

File オブジェクトを取得する

　
　


■File オブジェクトを取得する


ユーザーに知られることなく、任意のローカルファイルにアクセスする事はできません。
　
ユーザーによるファイルの選択（許可）が必要となります。
　
File オブジェクトを取得する方法は、２通りあります。
　
ファイル選択コントロールか、ドラッグアンドドロップを使用します。
　
■ファイル選択コントロールについて
　
ファイル選択コントロールについては、こちらで解説しています。
　
ファイルリストを取得する例は、こちらです。
　
■ドラッグアンドドロップについて
　
ドラッグアンドドロップについては、こちらで解説しています。
　
ファイルリストを取得する例は、こちらです。
　

上に戻る

　

File クラスのプロパティについて

　


■ファイルのプロパティ一覧

　
File インターフェースで利用可能な、プロパティの一覧です。（一部抜粋）
　
■ Blob インターフェース
　
プロパティ名型説明
sizeNumberバイトサイズを取得する（読み取り専用）
typeStringコンテンツタイプを取得する（読み取り専用）
　
■ File インターフェース
　
プロパティ名型説明
nameStringファイル名を取得する（読み取り専用）
lastModifiedDateDate最終更新日時を取得する（読み取り専用）
　

上に戻る

　

File クラスのメソッドについて

　


■ファイルのメソッド一覧

　
File インターフェースで利用可能な、メソッドの一覧です。（一部抜粋）
　
■ Blob インターフェース
　
メソッド 説明
slice() バッファの開始位置と終了位置を指定して、新しい Blob オブジェクトを生成する。
　
　


■slice() メソッド

　
バッファの開始位置と終了位置を指定して、新しい Blob オブジェクトを生成するには、slice() メソッドを使用します。
　
第02引数で指定する終了位置は、取得対象に含まれません。
　
引数を省略した場合、バッファ全体の複製となりますが、コンテンツタイプは空文字となります。
　
Blob.slice( 開始位置 , 終了位置 , "コンテンツタイプ" ) :ABlobrray
第01引数(略可)Number開始位置を指定。（0 から始まる番号）デフォルトは 0
第02引数(略可)Number終了位置を指定。（0 から始まる番号）デフォルトはすべての要素
マイナス値を指定すると「length + 第02引数」 の位置。(-1で最後尾は含まれない)
第03引数(略可)String新しい Blob オブジェクトのコンテンツタイプを指定する。省略した場合、空文字となる。
戻り値 Blob新しい Blob オブジェクトが得られる。
　
Blob オブジェクトを複製する

// ------------------------------------------------------------
// Blob オブジェクトを生成する
// ------------------------------------------------------------
// 適当なバッファ
var ary_u8 = new Uint8Array([0x00,0x01,0x02,0x03]);

// Blob オブジェクトを作成（バイナリ形式）
var blob_a = new Blob([ary_u8] , {type:"application/octet-stream"});

// Blob オブジェクトを複製
var blob_b = blob_a.slice(0 , blob_a.size , blob_a.type);


// ------------------------------------------------------------
// Blob オブジェクト内のバッファに読み取りアクセスする
// ------------------------------------------------------------
// FileReader オブジェクトを生成
var file_reader = new FileReader();

// 読み込み成功時に実行されるイベント
file_reader.onload = function(e){
	// Uint8Array オブジェクトを作成する
	var ary_u8 = new Uint8Array(file_reader.result);
	// 出力テスト
	console.log(ary_u8); // [0x00,0x01,0x02,0x03]
};

// 読み込みを開始する（ArrayBuffer オブジェクトを得る）
file_reader.readAsArrayBuffer(blob_b);
　
バッファの 3 番目から 8 番目を、新しい Blob オブジェクトとして取得する

// ------------------------------------------------------------
// Blob オブジェクトを生成する
// ------------------------------------------------------------
// 適当な文字列
var str = "あいうえお";

// Blob オブジェクトを作成（UTF-8 形式のプレーンテキスト）
var blob_a = new Blob([str] , {type:"text/plain"});

// 開始位置と終了位置を指定して、新しい Blob オブジェクトを取得する
var blob_b = blob_a.slice(3 , 9);


// ------------------------------------------------------------
// Blob オブジェクト内のバッファに読み取りアクセスする
// ------------------------------------------------------------
// FileReader オブジェクトを生成
var file_reader = new FileReader();

// 読み込み成功時に実行されるイベント
file_reader.onload = function(e){
	// Uint8Array オブジェクトを作成する
	var ary_u8 = new Uint8Array(file_reader.result);
	// 出力テスト
	console.log(ary_u8); // [ 0xE3,0x81,0x84 , 0xE3,0x81,0x86 ] (い,う)
};

// 読み込みを開始する（ArrayBuffer オブジェクトを得る）
file_reader.readAsArrayBuffer(blob_b);
　

上に戻る

　
前のページに戻る