Read a selected or a drag-dropped textfile

PCのファイルは、ドラッグ&ドロップあるいは <input type="file"> でアクセスできる。
この例では、選択したファイル、あるいはドロップしたファイルを読み込む。
Select a file :
- ffox37, crome41, opera28, Edge20 : works except code conversion to UTF-8.
- IE, safari517 : not works

Display area of the selected file.
File information.

JSでファイル名は得られるが、パスは得られない。

Event listener を生成してファイルを呼んでいる。

一度表示された情報をクリアしていない。
動作確認は、随時 reload して、表示情報をクリアしながら行うと良い。

複数ファイルを drag-dropped すると、File information は複数表示されるが、テキストは最後のファイルだけが表示される。

todo

NOT yet : to UTF-8
done : select/drop a file.
done : display the file info.
done : open the file, if a text file.

Reference:

HTML5におけるJavaScript by Puzzlenet Sophia.
秀和システム「HTML5 Webアプリケーションプログラミング入門」 html5/shuwa/08-04.html
JavaScript で File API を使用してファイルを読み取る