こんにちは。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;
}
以上、２回にわたり
HTML5の新機能を触ってみました。
HTML5ではできることが増えたり
既存でできていたことが、より簡単にできるようになったりしています。
また、ブラウザが対応していれば
マルチプラットフォームで動作するというのも大きな魅力です。
まだ正式勧告前ですが、今後の動向に注目です。
