JavaScript プログラミング講座


Blob と File クラスについて



・Blob と File クラスについて
・Blob オブジェクトを作成する
・File オブジェクトを作成する
・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 インターフェースの派生について
　
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バッファデータを配列に格納して指定する。複数のデータを指定すると、内部で昇順に結合され１つのバッファとなる。
第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バッファデータを配列に格納して指定する。複数のデータを指定すると、内部で昇順に結合され１つのバッファとなる。
第02引数 Stringファイル名を指定する。（name と同等）
第03引数(略可)FilePropertyBagFile クラスのプロパティ値を設定する。（name と size 以外）
戻り値 FileFile オブジェクトが得られる。
　
■第01引数（バッファデータ）
　
Blob コンストラクタの第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);
　

上に戻る

　
前のページに戻る