JavaScript プログラミング講座

 

Blob と File クラスについて

 


■File クラスについて


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

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

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

 
window.File が真であるか比較します。
 
InternetExplorer 9 以前では、対応していません。
 
 

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

 
Blob や File クラスには、読み取りアクセスする機能が存在しません。
 
別途、FileReader クラスを使用します。
 

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

 
Blob URL Scheme を使用します。
 
例えば、ローカルにある画像ファイルを、<IMG> 要素に表示する事ができます。
 


 

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

 


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

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

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

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

// ------------------------------------------------------------
// 適当なバッファを用意
// ------------------------------------------------------------
var str = "文字列テスト";
var source = [ str ];

// ------------------------------------------------------------
// BlobPropertyBag オブジェクトを用意
// ------------------------------------------------------------
var blob_property_bag = {
	type: "text/plain"
};

// ------------------------------------------------------------
// Blob オブジェクトを作成(UTF-8 形式のプレーンテキスト)
// ------------------------------------------------------------
var blob = new Blob( source , blob_property_bag );

// 出力テスト
console.log("type:" + (blob.type)); // "text/plain"
console.log("size:" + (blob.size)); // 18


// ------------------------------------------------------------
// FileReader オブジェクトを生成
// ------------------------------------------------------------
var file_reader = new FileReader();

// ------------------------------------------------------------
// 読み込み完了時に実行されるイベント(成功失敗に関係なく)
// ------------------------------------------------------------
file_reader.onloadend = function(e){

	// エラー
	if(file_reader.error) return;

	// 出力テスト
	console.log(file_reader.result); // "文字列テスト"
};

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

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

// ------------------------------------------------------------
// BlobPropertyBag オブジェクトを用意
// ------------------------------------------------------------
var blob_property_bag = {
	type: "application/octet-stream"
};

// ------------------------------------------------------------
// Blob オブジェクトを作成(バイナリ形式)
// ------------------------------------------------------------
var blob = new Blob( source , blob_property_bag );

// 出力テスト
console.log("type:" + (blob.type)); // "application/octet-stream"
console.log("size:" + (blob.size)); // 4


// ------------------------------------------------------------
// FileReader オブジェクトを生成
// ------------------------------------------------------------
var file_reader = new FileReader();

// ------------------------------------------------------------
// 読み込み完了時に実行されるイベント(成功失敗に関係なく)
// ------------------------------------------------------------
file_reader.onloadend = function(e){

	// エラー
	if(file_reader.error) return;

	// 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]);
var source = [ ary_u8_a , ary_u8_b , ary_u8_c ];

// ------------------------------------------------------------
// BlobPropertyBag オブジェクトを用意
// ------------------------------------------------------------
var blob_property_bag = {
	type: "application/octet-stream"
};

// ------------------------------------------------------------
// Blob オブジェクトを作成(バイナリ形式)
// ------------------------------------------------------------
var blob = new Blob( source , blob_property_bag );

// 出力テスト
console.log("type:" + (blob.type)); // "application/octet-stream"
console.log("size:" + (blob.size)); // 9


// ------------------------------------------------------------
// FileReader オブジェクトを生成
// ------------------------------------------------------------
var file_reader = new FileReader();

// ------------------------------------------------------------
// 読み込み完了時に実行されるイベント(成功失敗に関係なく)
// ------------------------------------------------------------
file_reader.onloadend = function(e){

	// エラー
	if(file_reader.error) return;

	// 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 オブジェクトは作成しません。
 
UI を経由して、File オブジェクトを取得します。
 

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

 
■ File オブジェクトを作成する
 
new 演算子を使って、File オブジェクトを作成します。
 
new File ( [バッファデータ] , "ファイル名" , {オプション} ) :File
第01引数 Arrayバッファデータを配列に格納して指定する。複数のデータを指定すると、内部で昇順に結合され1つのバッファとなる。
第02引数 Stringファイル名を指定する。(name と同等)
第03引数(略可)FilePropertyBagFile クラスのプロパティ値を設定する。(name と size 以外)
戻り値 FileFile オブジェクトが得られる。
 
■第01引数(バッファデータ)
 
 
■第03引数(FilePropertyBag オブジェクト)
 
新規にオブジェクトを作成し、以下のプロパティを追加します。
 
プロパティ名説明
typeStringコンテンツタイプを設定する。
lastModifiedNumber最終更新日時を設定する(単位:ミリ秒)
 
■作成例
 
File オブジェクトを作成(UTF-8 形式のプレーンテキスト)

// ------------------------------------------------------------
// 適当なバッファを用意
// ------------------------------------------------------------
var str = "文字列テスト";
var source = [ str ];

// ------------------------------------------------------------
// FilePropertyBag オブジェクトを用意
// ------------------------------------------------------------
var file_property_bag = {

	// コンテンツタイプを設定
	type: "text/plain",

	// 最終更新日時を設定(単位:ミリ秒)
	lastModified: 0
};

// ------------------------------------------------------------
// File オブジェクトを作成(UTF-8 形式のプレーンテキスト)
// ------------------------------------------------------------
var file = new File( source , "test.txt" , file_property_bag );

// 出力テスト
console.log("name:" + (file.name)); // "test.txt"
console.log("type:" + (file.type)); // "text/plain"
console.log("size:" + (file.size)); // 18


// ------------------------------------------------------------
// FileReader オブジェクトを生成
// ------------------------------------------------------------
var file_reader = new FileReader();

// ------------------------------------------------------------
// 読み込み完了時に実行されるイベント(成功失敗に関係なく)
// ------------------------------------------------------------
file_reader.onloadend = function(e){

	// エラー
	if(file_reader.error) return;

	// 出力テスト
	console.log(file_reader.result); // "文字列テスト"
};

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

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

// ------------------------------------------------------------
// FilePropertyBag オブジェクトを用意
// ------------------------------------------------------------
var file_property_bag = {

	// コンテンツタイプを設定
	type: "application/octet-stream",

	// 最終更新日時を設定(単位:ミリ秒)
	lastModified: 0
};

// ------------------------------------------------------------
// File オブジェクトを作成(バイナリ形式)
// ------------------------------------------------------------
var file = new File( source , "text.dat" , file_property_bag );

// 出力テスト
console.log("name:" + (file.name)); // "test.dat"
console.log("type:" + (file.type)); // "application/octet-stream"
console.log("size:" + (file.size)); // 4


// ------------------------------------------------------------
// FileReader オブジェクトを生成
// ------------------------------------------------------------
var file_reader = new FileReader();

// ------------------------------------------------------------
// 読み込み完了時に実行されるイベント(成功失敗に関係なく)
// ------------------------------------------------------------
file_reader.onloadend = function(e){

	// エラー
	if(file_reader.error) return;

	// Uint8Array オブジェクトを作成する
	var ary_u8 = new Uint8Array(file_reader.result);

	// 出力テスト
	console.log(ary_u8); // [0x00,0x01,0x02,0x03]
};

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

// ------------------------------------------------------------
// 複数の適当なバッファを用意
// ------------------------------------------------------------
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]);
var source = [ ary_u8_a , ary_u8_b , ary_u8_c ];

// ------------------------------------------------------------
// FilePropertyBag オブジェクトを用意
// ------------------------------------------------------------
var file_property_bag = {

	// コンテンツタイプを設定
	type: "application/octet-stream",

	// 最終更新日時を設定(単位:ミリ秒)
	lastModified: 0
};

// ------------------------------------------------------------
// File オブジェクトを作成(バイナリ形式)
// ------------------------------------------------------------
var file = new File( source , "test.dat" , file_property_bag );

// 出力テスト
console.log("name:" + (file.name)); // "test.dat"
console.log("type:" + (file.type)); // "application/octet-stream"
console.log("size:" + (file.size)); // 9


// ------------------------------------------------------------
// FileReader オブジェクトを生成
// ------------------------------------------------------------
var file_reader = new FileReader();

// ------------------------------------------------------------
// 読み込み完了時に実行されるイベント(成功失敗に関係なく)
// ------------------------------------------------------------
file_reader.onloadend = function(e){

	// エラー
	if(file_reader.error) return;

	// 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(file);
 


 

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

 
 


■ File オブジェクトの取得について

 
■セキュリティについて
 
ユーザーに知られる事なく、ローカルファイルにアクセスする事はできません。
 
ユーザーによるファイルの選択(許可)が必要です。
 
■ローカルファイルを取得できる UI について
 
 

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

 
■ファイル選択コントロールについて
 
<input type="file"> 要素 の、files プロパティを使用します。
 
■ドラッグアンドドロップについて
 
DataTransfer クラスの、files プロパティを使用します。
 
ファイルリストを取得する例は、こちらです。
 
■クリップボードについて
 
DataTransfer クラスの、files プロパティを使用します。
 
ファイルリストを取得する例は、こちらです。
 


 

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

 


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

 
■ Blob インターフェース
 
プロパティ名説明
sizeNumberバイトサイズを取得する
typeStringコンテンツタイプを取得する
 
■ File インターフェース
 
プロパティ名説明
nameStringファイル名を取得する
lastModifiedNumber最終更新日時を取得する(単位:ミリ秒)
lastModifiedDateDate最終更新日時を取得する
 


 

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

 


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

 
■ Blob インターフェース
 
メソッド 説明
slice() バッファの開始と終了位置を指定して、新しい Blob オブジェクトを生成する。
 
 


■バッファの開始と終了位置を指定して、新しい Blob オブジェクトを生成する

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

// ------------------------------------------------------------
// Blob オブジェクトを複製する関数
// ------------------------------------------------------------
function BlobClone(blob){
	return blob.slice(0 , blob.size , blob.type);
}


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

// ------------------------------------------------------------
// BlobPropertyBag オブジェクトを用意
// ------------------------------------------------------------
var blob_property_bag = {
	type: "application/octet-stream"
};

// ------------------------------------------------------------
// Blob オブジェクトを作成(バイナリ形式)
// ------------------------------------------------------------
var blob_a = new Blob( source , blob_property_bag );

// ------------------------------------------------------------
// Blob オブジェクトを複製
// ------------------------------------------------------------
var blob_b = BlobClone(blob_a);

// 出力テスト
console.log("type:" + (blob_b.type)); // "application/octet-stream"
console.log("size:" + (blob_b.size)); // 4


// ------------------------------------------------------------
// FileReader オブジェクトを生成
// ------------------------------------------------------------
var file_reader = new FileReader();

// ------------------------------------------------------------
// 読み込み完了時に実行されるイベント(成功失敗に関係なく)
// ------------------------------------------------------------
file_reader.onloadend = function(e){

	// エラー
	if(file_reader.error) return;

	// Uint8Array オブジェクトを作成する
	var ary_u8 = new Uint8Array(file_reader.result);

	// 出力テスト
	console.log(ary_u8); // [0x00,0x01,0x02,0x03]
};

// ------------------------------------------------------------
// 読み込みを開始する(ArrayBuffer オブジェクトを得る)
// ------------------------------------------------------------
file_reader.readAsArrayBuffer(blob_b);
 
開始と終了位置を指定して、新しい Blob オブジェクトを作成する

// ------------------------------------------------------------
// 適当なバッファを用意
// ------------------------------------------------------------
var str = "あいうえお";
var source = [ str ];

// ------------------------------------------------------------
// BlobPropertyBag オブジェクトを用意
// ------------------------------------------------------------
var blob_property_bag = {
	type: "text/plain"
};

// ------------------------------------------------------------
// Blob オブジェクトを作成(UTF-8 形式のプレーンテキスト)
// ------------------------------------------------------------
var blob_a = new Blob( source , blob_property_bag );

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

// ------------------------------------------------------------
// FileReader オブジェクトを生成
// ------------------------------------------------------------
var file_reader = new FileReader();

// ------------------------------------------------------------
// 読み込み完了時に実行されるイベント(成功失敗に関係なく)
// ------------------------------------------------------------
file_reader.onloadend = function(e){

	// エラー
	if(file_reader.error) return;

	// 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);