File APIを使ってローカルのファイルを読み込んでみる ｜ Tips Note by TAMHTML5のFile APIについて少し調べる機会がありましたので、JavaScriptを使ってローカルからファイルを読み込んで、ブラウザ上に表示するところまでを試してみます。 画像の読み込み ローカルの画像を読み込んで、ブラウザ上に表示させてみます。 <input type="file">でファイルの読み込みを行い、読み込んだ結果を#resultに出力します。 ■HTML <input type="file" name="file" id="file"> <div id="result"></div> ■JavaScript var file = document.getElementById('file'); var result = document.getElementById('result'); // File APIに対応しているか確認 if(window.File && w
