Firefox web browser - Faster, more secure & customizable |
W3C FileAPI in Firefox 3.6において、Firefox 3.6で新しくサポートが追加されるW3C File APIの利用例が紹介されている。W3C File APIは特にXMLHttpRequestと組み合わせての利用を想定して策定されているファイルアクセス用のインタフェースとAPI。非同期でのファイルの読み込みやイベント処理を規程している。現在のところワーキングドラフトの段階で、インタフェース、API、イベントモデルなどが定義されている。W3C File APIから特にポイントとなるインタフェース、メソッド、イベント、属性を次に掲載する。
| インタフェース | 内容 | 属性 |
|---|---|---|
| FileReaderインタフェース | ファイルの読み込み操作を提供 | readyState, result, error |
| Fileインタフェース | ファイルの名前や種類、URNを表現 | name, type, urn |
| Blobインタフェース | 実際のデータのまとまりを表現 | size |
| FileListシーケンス | 選択されたファイルのリストを表現 |
| FileReaderで使われるイベント | 内容 |
|---|---|
| onloadstart | 読み込み開始時 |
| onprogress | 読み込み中 |
| onload | 読み込みが完了したとき |
| onabort | 読み込みが中断されたとき |
| onerror | 読み込みに失敗したとき |
| onloadend | リクエストが完了したとき |
| メソッド | 内容 |
|---|---|
| FileReader#readAsBinaryString(Blob) | バイナリ文字列としてデータを読み込み |
| FileReader#readAsText(Blob) | テキストとしてデータを読み込み |
| FileReader#readAsDataURL(File) | Data URLとしてデータを読み込み |
| Blob#slice(start,length) | 指定された領域のデータを表現するBlobを返す |
Firefoxでは3.6でW3C File APIの多くの機能をサポートする。Firefoxは3.0の段階でファイルをメモリへ読み込ませる機能を提供しているが、これは同期処理になるほか、3.6以降はW3C File APIを推奨し、こちらは非推奨になる見通し。W3C File APIを使うことで非同期にファイルをメモリを読み込ませることができるようになる。
Firefox 3.6ではW3C File APIで規程されているFileListを活用する形で、複数ファイルの選択にも対応。inputタグの指定で「multiple="true"」を指定することで可能。指定がなければ従来どおり単一ファイルの選択のみとなる。サーバにデータを送信する前にデータをメモリ読み込ませJavaScriptで処理できるようになる。クライアントのみでデータを処理して利用することも、メモリで読み込ませたデータをサーバに送信して活用することも可能。
W3C FileAPI in Firefox 3.6で紹介されている機能のいくつかをそのまま利用できるようにしたHTMLと実行例を次に掲載しておく。実行するにはFirefox 3.6 beta4など3.6系のFirefoxが必要。
|
|
デモンストレーションの実行例 / Firefox 3.6 beta4 |
従来どおり単一ファイルのみ選択できる |
|
|
複数のファイルを選択できる |
選択したファイルの情報を表示 |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Firefox 3.6 W3C File APIデモンストレーション</title>
<style type="text/css">
body {
width: 600px;
}
#area_fileselection {
background: #eee;
border: 1px solid #333;
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
}
#area_fileinformation {
background: #efefef;
border: 1px solid #333;
margin: 10px 10px 10px 10px;
padding: 0px 10px 0px 10px;
min-height: 300px;
}
fieldset.inputbox {
text-align: center;
}
fieldset.inputbox label,input {
margin: 20px 0px 20px 0px;
}
</style>
<script type="text/javascript">
//<![CDATA[
var inputfile, inputfiles, fileinfotext;
function init()
{
inputfile = document.getElementById("inputfile").files;
inputfiles = document.getElementById("inputfiles").files;
fileinfotext = document.getElementById("fileinfotext");
var submit = document.getElementById("submit");
submit.addEventListener("click", printFilesList, true);
}
function printFilesList()
{
var buffer = "";
var addmessage = function(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
buffer += "ファイル名: " + file.name + "<br />";
buffer += "タイプ: " + file.type + "<br />";
buffer += "URN: " + file.urn + "<hr />";
}
}
addmessage(inputfile);
addmessage(inputfiles);
fileinfotext.innerHTML = buffer;
}
window.addEventListener("load", init, true);
//]]>
</script>
</head>
<body>
<div id="area_fileselection">
<form>
<fieldset class="inputbox">
<legend>W3C File APIデモンストレーション (Firefox 3.6)</legend>
<label for="inputfile">シングルファイルセレクタ</label>
<input id="inputfile" type="file" /><br />
<label for="inputfiles"> マルチファイルセレクタ </label>
<input id="inputfiles" type="file" multiple="true" />
<input id="submit" type="button" value="選択されたファイルのチェック" />
</fieldset>
</form>
</div>
<div id="area_fileinformation">
<p id="fileinfotext"></p>
</div>
</body>
</html>
エクステンションやプラグインを使うことなく複数のファイルを選択する機能が登場するのは便利だ。またこの機能はドラッグ&ドロップとも連携が可能で、OSのファイルマネージャで複数選択したファイルをそのままドラッグ&ドロップで流し込んで同じように処理することもできる。
