Webアプリからローカルファイルへアクセスする(後編)

また多少間があいてしまいましたね。
今回は前回の続きでWebアプリからローカルファイルの内容を読み込む方法について考察したいと思います。

前回の記事ではWebアプリからローカルにファイルを保存する際に一旦サンドボックス化された領域に保存してから、それを改めて<a>要素のdownload属性を使用してデフォルトのダウンロードフォルダに保存するという回りくどい方法を紹介しました。
しかし、ローカルファイルから読み込む場合についてはもう少しスマートに解決する方法があります。それは、<input type="file">を使う方法です。input要素を使用すればファイルダイアログはブラウザーが勝手に表示してくれますし、結果も前回の記事で紹介したFilesystem APIでも使用できるFilelistというオブジェクトで取得できるので、そこからバイナリーデータやテキストデータを取り出すことは非常に容易に出来ます。

以下にjsdo.itを使用したデモを掲載しておきます。詳しいコードの書き方などはそちらを参考にしてください。