Pocket

こんにちは。itouです。
前回は、HTML5の技術を使って
入力したテキストの内容を自動保存していました。

今回、ご紹介するのは
テキストファイルのブラウザへのドラック&ドロップです。

memo.html
を開き、テキスト入力エリアに
テキストファイル(Shift-Jis)をドラック&ドロップしてみます。

テキストの内容がテキストエリアに表示されました。

Drag and Drop API File API

これは、HTML5で追加されたDrag and Drop APIとFile APIを使用しております。

該当のテキストエリアにドラック&ドロップすると
ondropイベントが動作し、onDropメソッドが実行されます。

onDropメソッドの実行

<textarea> id="value" rows="30" cols="100" ondrop="onDrop(event)"></textarea>

onDropメソッド内ではFileReaderのreadAsTextでファイルをSJISエンコードで読み込みます。

ファイルの読み込み

var files = event.dataTransfer.files;
var file = event.dataTransfer.files[0];
var reader = new FileReader();
reader.readAsText(file, "sjis");

ファイルの読み込み処理は、非同期で行われます。
読み込み異常の場合はonerrorイベント
読み込み正常の場合はonloadイベントが発生するので
それぞれの実施内容を定義しておきます。
読み込み正常時の場合は、テキスト入力エリアに
テキストを表示するにようしました。

読み込み異常時のイベント

reader.onerror = function() {
window.alert("ドラッグ&ドロップでエラーが発生しました");

読み込み正常時のイベント

reader.onload = function() {
document.getElementById("value").innerHTML = reader.result;
}

以上、2回にわたり
HTML5の新機能を触ってみました。

HTML5ではできることが増えたり
既存でできていたことが、より簡単にできるようになったりしています。

また、ブラウザが対応していれば
マルチプラットフォームで動作するというのも大きな魅力です。

まだ正式勧告前ですが、今後の動向に注目です。