使用 File API 正常读取文件

Question

我无法在 HTML 程序中处理文件 API。到目前为止，这是我的代码：

<html>
<script>
var file = 'C://test.txt';
var myBlob = new Blob([file], {type : "text/plain"});
var myReader = new FileReader();
myReader.addEventListener("loadend", function(e){
    document.write(e.srcElement.result);
});
myReader.readAsText(myBlob);
</script>
</html>

问题是，当我运行它时，输出是C://test.txt。但是我想输出文件的内容而不是文件名。我已经检查过我的浏览器是最新的。我也有必要坚持 HTML 和 JavaScript。请帮忙。

Answer 1

一般而言，如果用户没有明确操作以启动文件系统访问，您的应用代码无法从用户的文件系统获取文件的内容——但也有例外情况，您可以在以下位置阅读更多相关信息.

因此，为了让您的 Web 应用程序运行从任意来源访问用户本地文件系统中的文件，您必须提供一些东西来让用户自己 select 他们想要您的应用程序的文件使用；本质上，这意味着在您的代码中执行以下任一操作：

在文档的标记中包含一个 <input type="file"> 元素
在您的文档中创建一个拖放区，供用户将文件拖入

MDN 有一个非常好的 Using files from web applications 方法，其中详细介绍了如何使其工作。

还有一个非常好的 HTML5Rocks Reading files in JavaScript using the File APIs 指南，提供了类似的信息和示例。

使用 File API 正常读取文件

Normal file reading using File API

html

javascript

filereader

fileapi