jQueryのload関数でtxtファイルを読み込みHTMLとして表示する方法について

Question

前提・実現したいこと

<input type="file">で選択したローカルtxtファイルの中身をHTMLとして表示したい

発生している問題・エラーメッセージ

jQueryのload関数を使えばあらかじめ指定しておいたファイルの読み込み表示ができるようなのですが、inputタグで選択したファイルを読み込むようなことはできないでしょうか。

Comments

[m.ts10806]

とりあえず自分なりにまずやってみませんか？
「選択した」はいいけど、どのタイミングで読み込ませるとか　そういった要件も具体化してください。

[m.ts10806]

「できるかどうか」といえば「できる」ですが、おそらく質問者さんの想定している範囲の出来事にはなりません。

[退会済みユーザー]

そうですね。すごいあいまいな質問をしていました。
教えていただいたページがまさにやりたいことなので参考に作ってみて悩んだらまた質問内容を修正します。

[m.ts10806]

質問修正するのではなかったのでしょうか・・・
「コピペで出来るコードがもらえたからそれで終わり！」ではあまりにも自分勝手すぎますし回答者への印象も悪く、理解度が不明です。

Answer 1

ヒント記事のみ。あとは工夫してください。

• HTML5のFile APIでローカルファイル情報取得してやんよ!!!

Answer 2

ありがとうございます

Answer 3

<script>
$(function(){
  $('#f1').on('change',function(){
    var f=$(this).get(0).files[0];
    var fr = new FileReader();
    fr.addEventListener('load',function(e) {
      var src=e.target.result;
      $('#inc').html(src);
    });
    fr.readAsText(f);
  });
});
</script>
<input type="file" id="f1">
<div id="inc"></div>