web-dev-qa-db-ja.com

パラメーターは 'Blob'タイプではありません

ファイルAPIを使用してローカルファイルからテキストを表示するために以下のコードを記述しましたが、ボタンをクリックしても何も起こりません。ブラウザーで要素を検査すると、次のエラーが表示されます。私は何を間違えていますか？

不明なTypeError：「FileReader」で「readAsText」を実行できませんでした：パラメーター1のタイプが「Blob」ではありません。

<!DOCTYPE html>
    <html>
    <body>

    <p>This example uses the addEventListener() method to attach a click event to a button.</p>

    <button id="myBtn">Try it</button>
    <pre id="file"></pre>

    <script>
    document.getElementById("myBtn").addEventListener("click", function(){
       var file = "test.txt"
       var reader = new FileReader();

       document.getElementById('file').innerText = reader.result;
   
       reader.readAsText(file);

    });
    </script>

    </body>
    </html>
javascripthtmlhtml5fileapi
14
user3293692

FileコンテンツをinnerHtmlに保存するには、最初にファイルを読む必要があります。 loadendイベントは、ファイルが完全に読み取られたときにのみ発生し、エラーなしでそのコンテンツにアクセスできます。

var reader = new FileReader();
var fileToRead = document.querySelector('input').files[0];

// attach event, that will be fired, when read is end
reader.addEventListener("loadend", function() {
   // reader.result contains the contents of blob as a typed array
   // we insert content of file in DOM here
   document.getElementById('file').innerText = reader.result;
});

// start reading a loaded file
reader.readAsText(fileToRead);

もっと読むことができます here -および here

3
Andrew Evt

あなたはいくつかのエラーを犯しました。

エラーメッセージが訴えているのは、ハードコードされた文字列を使用してファイルを選択しようとしているということです。 どのファイルがロードされるかを決定することはできません。 File APIでは、File入力を介してユーザーが選択のファイルのみを読み取ることができます。

2つ目は、リーダーのresultプロパティを読み取ろうとしていることですbeforeファイルを読み取りました。これを行うにはイベントハンドラが必要です（Ajaxなどのファイル読み取りは非同期であるため）。

document.getElementById("myBtn").addEventListener("click", function() {

  var reader = new FileReader();
  reader.addEventListener('load', function() {
    document.getElementById('file').innerText = this.result;
  });
  reader.readAsText(document.querySelector('input').files[0]);

});
<input type="file">
<button id="myBtn">Try it</button>
<pre id="file"></pre>
17
Quentin

他の人が言ったように、onloadイベントが欠落していることに気付きました。

したがって、リーダーに何かをさせる方法を示すいくつかの異なる方法があります。1つはreadAsTextを、もう1つはreadAsDataURLを使用してデータをbase64バイト文字列として取得する方法です。 、私の意見では、Unicodeやその他の奇妙な疑問符の文字を心配する必要はありません。それらの動作を確認するには、リスナーの呼び出しをuploadFile();とuploadFile1();の間で切り替えます。また、ファイルオブジェクトを取得する方法もいくつか示します。

document.getElementById("myBtn").addEventListener("click", function() {
  uploadFile1();
}); 

function uploadFile1(){
  var f = myInput.files[0];
  var reader = new FileReader();
  reader.onload = processFile(f);
  reader.readAsText(f); 
}

function uploadFile(){
  var f = document.querySelector('input').files[0];
  var reader = new FileReader();
  reader.onload = processFile(f);
  reader.readAsDataURL(f); 
}

function processFile(theFile){
  return function(e) { 
    // Use the .split I've included when calling this from uploadFile()
    var theBytes = e.target.result; //.split('base64,')[1]; 
    document.getElementById('file').innerText = theBytes;
  }
}
<input id="myInput" type="file">    
<button id="myBtn">Try it</button>
<span id="file"></span>

そして、通常、私はあなたがちょうどできるはずだと思うでしょう：

<input type="button" onclick="uploadFile()" id="myBtn">Try it</button>

そのリスナーを追加する代わりに、何らかの理由でJSFiddleで機能していませんでした。

https://jsfiddle.net/navyjax2/heLmxegn/1/

1
vapcguy