JavaScriptでファイルの内容を取得したい

Question

HTMLでファイル選択をし、inputボタンでファイルの内容を取得したいです。

<input type="file" id="temp" value=""/>
<input type="button" id="btn" value="input" onclick="inputFile()"/>

function inputFile() {
    var files = document.getElementById('temp').files;
    alert(files);        // [object FileList]
    var file = files[0];
    alert(file);         // [object File]
    alert(file.name);
}

上記ソースでファイル名とファイルのサイズは取得できているのですが、
ファイルの内容（Blob型？）の取得方法がわかりません。

リンク内容

↑このリンク先記事を見たのですが、プロパティにはファイルの内容のようなものは見当たりませんでした。

Blob型では出力が出来ないと思うので、string変換などでconsoleかalertで出力する方法をお教えいただきたいです。

Answer 1

id=tempのHTML要素が2つあるので無理です

sample

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#btn').addEventListener('click',()=>{
    var file=document.querySelector('#temp').files[0];
    if(file !==undefined){
      var fr = new FileReader();
      fr.addEventListener('load',e=>{
        var blob=new Blob([e.target.result],{"type":file.type});
        var binary=String.fromCharCode.apply("",new Uint8Array(e.target.result));
        var base64="data:"+file.type+";base64,"+btoa(binary);
        console.log(blob);
        console.log(binary);
        console.log(base64);
      });
      fr.readAsArrayBuffer(file);
    }
  });
});
</script>
<input type="file" id="temp" value="">
<input type="button" id="btn" value="input">

※一部調整

Comments

[masa95814]

すみません、記述ミスでした。

誤：<input type="button" id="temp" value="input" onclick="inputFile()"/>
正：<input type="button" id="btn" value="input" onclick="inputFile()"/>

[yambejp]

sample追記しておきました
具体的に何がほしいのかわからないのでblobと中身の両方とっています

[masa95814]

ありがとうございますm(__)m

Answer 2

File は Blob? の認識は正しい

リンク先のページの概要部末尾に図示された内容：
File は Blob から派生したオブジェクトなので、当然にBlob オブジェクトの機能（扱い）も可能。

• Blob(File)をデータとして読むには FileReader が必要です。

あとは、すでに回答されている yambejp さんのコードの通り。