HTML5の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
![File APIを使ってローカルのファイルを読み込んでみる | Tips Note by TAM](https://cdn-ak-scissors.b.st-hatena.com/image/square/0d7b0941ee29851fd5805080c36c6a8d7b9fb225/height=288;version=1;width=512/https%3A%2F%2Fwww.tam-tam.co.jp%2Ftipsnote%2Fwpdata%2Fwp-content%2Fuploads%2F2017%2F01%2F1701_fileapi.jpg)