Mais conteúdo relacionado Semelhante a File API: Writer & Directories and System (20) File API: Writer & Directories and System9. File API とは
ファイルを JavaScript 上で扱うための仕様
ユーザーが指定したファイルの情報を取得
ファイル名
ファイルサイズ
指定されたファイルを読み込み
サポートしているブラウザ
Firefox 3.6以降
Google Chrome 6以降
Opera 11.50で確認
window.URL は利用できない
11. File API のインターフェイスの説明 - 1
FileList
<input type="file" multiple /> で指定されたファイル
の一覧
Blob
"データ"を扱うインターフェイス
範囲を指定してバイナリのチャンクを取得できる
Fileの親インターフェイス
File
ファイル名と最終更新日時の取得
12. File API のインターフェイスの説明 - 2
FileReader / FileReaderSync
エンコーディングを指定してテキストとして読み込むこと
ができる
バイナリデータとして読み込むことができる
URI scheme
Blob のURLを生成することができる
選択されたファイルのプレビューなど
13. 注意事項
// プレフィックスが必要な場合があります
var BlobBuilder =
window.BlobBuilder ||
window.MozBlobBuilder ||
window.WebKitBlobBuilder;
var URL = window.URL || window.webkitURL;
var requestFileSystem =
window.requestFileSystem ||
window.webkitRequestFileSystem;
15. File API を使ったコード
$('#show_file').submit(function() {
for (var i = 0; i < this.file.files.length; i++) {
var file = this.file.files[i];
print('name:' + file.name);
print('size:' + file.size);
print('type:' + file.type);
if (isImage(file.type)) {
printImage(URL.createObjectURL(file));
}
}
return false;
});
19. Drag and drop API
function receive(event, element) {
var data = event.dataTransfer.items;
for (var i = 0; i < data.length; i += 1) {
if (
(data[i].kind == 'file') &&
(data[i].type.match('^image/'))
) {
var img = new Image();
img.src = URL.createObjectURL(data[i].getAsFile());
element.appendChild(img);
}
}
}
20. File API: Writer とは
ファイルに書き込むための仕様
File API で定義されている File/Blob は変更すること
ができなかった
サポートしているブラウザ (全ての機能が使えるわ
けではない)
Firefox 6以降
Google Chrome 9以降 (起動オプションが必要)
--unlimited-quota-for-files
--allow-file-access-from-files
22. File API: Writer のインターフェイスの説明
BlobBuilder
バイナリデータの構築
FileSaver
Blob をファイル名を指定して保存
FileWriter / FileWriterSync
length, position
write, seek, truncate
23. File API: Writer を使ったコードのイメージ
var bb = new BlobBuilder();
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
bb.append(createCSVRow(row));
}
// window.saveAs は 2011/7/23 時点ではまだ利用できません
var fileSaver =
window.saveAs(bb.getBlob('text/csv'), 'date.csv');
24. File API: Directories and System とは
ファイルシステムにアクセスするための仕様
ただし、任意のファイルにアクセスすることはできない
データのストレージとして利用することができる
オリジン毎のサンドボックスが用意される
オリジン = プロトコル + ドメイン + ポート
サポートしているブラウザ
Google Chrome 9以降 (オプションを付けると利用可
能)
--unlimited-quota-for-files
--allow-file-access-from-files
25. File API: D & S のインターフェイス
LocalFileSystem / LocalFileSystemSync
FileSystem
Entry
DirectoryEntry
DirectoryReader
FileEntry
27. File API: D & S でファイルを保存 - 1
$('#save_file').submit(function() {
for (var i = 0; i < this.file.files.length; i++) {
saveFile(this.file.files[i]);
}
return false;
});
28. File API: D & S でファイルを保存 - 2
function saveFile(selected) {
requestFileSystem(PERSISTENT, 1024 * 1024,
function(fs) {
printAnchor(fs.root.toURL());
fs.root.getDirectory('data', { create: true },
function(dir) {
printAnchor(dir.toURL());
dir.getFile(selected.name, { create: true },
function(file) {
printAnchor(file.toURL());
29. File API: D & S でファイルを保存 - 3
file.createWriter(function(writer) {
writer.onwrite = function(e) {
if (isImage(selected.type)) {
printImage(file.toURL());
}
};
writer.onerror = function(e) {
log('error: ' + e);
};
var bb = new BlobBuilder();
bb.append(selected);
writer.write(bb.getBlob());
});
30. File API: D & S でファイルの一覧を取得 - 1
$('#find').click(function() {
requestFileSystem(PERSISTENT, 1024 * 1024,
function(fs) {
traverse(fs.root);
}
);
return false;
});
31. File API: D & S でファイルの一覧を取得 - 2
function traverse(dir) {
var reader = dir.createReader();
reader.readEntries(
function(entries) {
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
printAnchor(entry.toURL());
if (entry.isDirectory) {
traverse(entry);
}
}
},
function(e) {
log('error: ' + e);
}
);
}
32. Writer & Directories and System の使い所
ログの保存
追記していくことができるので
"moveTo" などでローテーションもできそう
メールアプリケーションのキャッシュ
大きなファイルを保存することができる
CMS のオフラインでの下書き機能
ストレージ的な利用
37. まとめ
File API: Writer & Directories and System
ファイルシステムをストレージとして利用可能にする
API
ウェブアプリケーションの可能性が広がる
大きなファイルを扱うアプリケーション
オフラインで編集を行うアプリケーション
38. ソースコード
File API
https://gist.github.com/dad2bb6bd1061ab712f7
File API: Writer & Directories and System
https://gist.github.com/f6e62d8416ea4bdd0fe4