參數不是'Blob'類型

我已經編寫了下面的代碼以使用文件API顯示來自本地文件的文本，但是當我單擊按鈕時，沒有任何反應，並且在檢查元素時出現以下錯誤瀏覽器，我什麼東錯了？參數不是'Blob'類型

Uncaught TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type '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>

來源

2015-11-25 user3293692

'的typeof文件== 「字符串」 // TRUE' – Jonathan

-1

設置文件內容爲innerHtml您必須首先閱讀該文件。 loadend事件觸發，只有當文件被完全readed，你可以沒有錯誤訪問其contect：

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

來源

2015-11-25 19:44:37

那將錯誤，因爲'blob'是不確定的。 – Quentin

如果想將其讀入變量，該怎麼辦？我們是否明確地將其轉儲到innerText中？ – CromeX

你已經做了幾個錯誤。

錯誤消息抱怨的是您試圖使用硬編碼字符串選擇文件。 您無法確定哪個文件被加載。 File API將只允許您通過文件輸入讀取用戶選擇的文件。

第二個問題是您正在嘗試閱讀之前讀者的result屬性。你需要一個事件處理程序來做到這一點（因爲像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>

來源

2015-11-25 19:53:25 Quentin

參數不是'Blob'類型

回答

相關問題