HTML5のFile APIでローカルファイルを読み込む

HTML5も大分普及してきましたね。今回はFile APIでローカルCSVファイルを読み込んでテーブルに展開するデモを作ってみました。そんなもん何処で使うんだよと思われるかもしれませんが、業務システムでCSVを取り込むなんてのは日常茶飯事なんですよ

サンプルコード

ちょっと長いですがソースは以下になります

$(document).readyの中がメインとなるロジックで、下3つのfunctionはユーティリティです。サンプルなのでエラーは無視しています。内容は概ね以下のような感じ

  • inputのchangeハンドラでメインとなる処理を実行(6~24行)
  • FileReaderのonloadハンドラで読み込んだCSVをtableに展開する12行~20行)
  • プレースホルダのdivタグに展開したtableを挿し込む(18、19行)
  • FileReader.readAsTextでtextとしてファイルを読み込む(22行)

画像なんかを読み込みたい時はFileReader.readAsDataURLを使います。base64でエンコードされた文字列を取得できるので、即表示したい場合は、その文字列をimgタグのsrcに挿し込むだけで実現出来ます

デモ

CSVファイルを選択すると、ボタンの下にテーブルが展開されます。有効なCSVの形式は、カンマ区切り、改行LF(CRLF)、エンコードUTF-8に限ります。データ送信は行われないのでご安心を

GistにサンプルCSVを作りました。ダウンロードしてお試しください

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

プライバシーポリシー