示例 的 FileReader :

function readSingleFile(e) {
  var file = e.target.files[0];
  if (!file) {
    return;
  }
  var reader = new FileReader();
  reader.onload = function(e) {
    var contents = e.target.result;
    displayContents(contents);
  };
  reader.readAsText(file);
}

function displayContents(contents) {
  var element = document.getElementById('file-content');
  element.textContent = contents;
}

document.getElementById('file-input')
  .addEventListener('change', readSingleFile, false);

<input type="file" id="file-input" />
<h3>Contents of the file:</h3>
<pre id="file-content"></pre>

规格

http://dev.w3.org/2006/webapi/FileAPI/

浏览器兼容性

• IE 10+
• Firefox 3.6+
• Chrome 13+
• Safari 6.1+

http://caniuse.com/#feat=fileapi

只需一秒钟，当我重新加载相同的最后一个文件时，内容不会改变（当我编辑文件文本时，我会说它的内容）。你能帮忙吗？

@SamusHands 是的，你说得对，我可以在 Safari 和 Chrome 中重现该问题（在 Firefox 中运行正常）。在每个 onClick 事件上将输入的值设置为 null 应该可以解决问题，请参阅：.com/a/12102992/63011

这是 FileReader 的一个好例子，但上面的 displayContents 有一个注释：请注意，像这样使用不受信任的内容设置 innerHTML 可能存在安全漏洞。（要亲自查看，请创建一个包含类似内容的 bad.txt，并查看警报是否得到执行 - 这可能是更恶意的代码。）

@ShreevatsaR 的观点非常好。我的代码片段只是一个例子，但你说得对，它不应该助长不良的安全习惯。我用 textContent 替换了 innerHTML。谢谢你的评论。

@TeylerHalama 您还可以为此使用 DOMContentLoaded 事件。

HTML5 fileReader 工具 确实允许您处理本地文件，但这些文件必须由用户选择，您不能在用户磁盘中寻找文件。

我目前在 Chrome (6.x) 的开发版本中使用此功能。我不知道其他浏览器是否支持此功能。

快速扫描所引用的规范（最后更新于 2012-07-12）显示，没有文件写入功能，只有读取功能。

因为我没有生活，我想要那 4 个声誉点，这样我就可以向真正擅长编码的人（赞同答案）表达我的爱，我分享了我对 Paolo Moretti 代码的改编。只需使用要 openFile( 执行的函数，以文件内容作为第一个参数 ) .

function dispFile(contents) {
  document.getElementById('contents').innerHTML=contents
}
function clickElem(elem) {
	// Thx user1601638 on Stack Overflow (6/6/2018 - https://.com/questions/13405129/javascript-create-and-save-file )
	var eventMouse = document.createEvent("MouseEvents")
	eventMouse.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
	elem.dispatchEvent(eventMouse)
}
function openFile(func) {
	readFile = function(e) {
		var file = e.target.files[0];
		if (!file) {
			return;
		}
		var reader = new FileReader();
		reader.onload = function(e) {
			var contents = e.target.result;
			fileInput.func(contents)
			document.body.removeChild(fileInput)
		}
		reader.readAsText(file)
	}
	fileInput = document.createElement("input")
	fileInput.type='file'
	fileInput.style.display='none'
	fileInput.onchange=readFile
	fileInput.func=func
	document.body.appendChild(fileInput)
	clickElem(fileInput)
}

Click the button then choose a file to see its contents displayed below.
<button onclick="openFile(dispFile)">Open a file</button>
<pre id="contents"></pre>

谢谢，很有帮助。不过请注意，除了 clickElem() 中的代码外，您还可以直接调用 fileInput.click()。（至少在最新版本的 Chrome 中）

尝试

function readFile(file) {
  return new Promise((resolve, reject) => {
    let fr = new FileReader();
    fr.onload = x=> resolve(fr.result);
    fr.readAsText(file);
})}

但用户需要采取行动来选择文件

function readFile(file) {
  return new Promise((resolve, reject) => {
    let fr = new FileReader();
    fr.onload = x=> resolve(fr.result);
    fr.readAsText(file);
})}

async function read(input) {
  msg.innerText = await readFile(input.files[0]);
}

<input type="file" onchange="read(this)"/>
<h3>Content:</h3><pre id="msg"></pre>

我刚刚看到 msg.innerText，第一次了解到一些用 ID 标识的元素可以通过 ID 作为变量名或窗口对象的属性来访问。

所以答案是我们不能。html 似乎非常适合文档交互！但并非所有内容都可以提供。本地文件访问会很好

这里的其他人已经给出了相当复杂的代码。也许当时需要更复杂的代码，我不知道。无论如何，我赞成其中一个，但这里有一个非常简化的版本，其工作原理相同：

function openFile() {
  document.getElementById('inp').click();
}
function readFile(e) {
  var file = e.target.files[0];
  if (!file) return;
  var reader = new FileReader();
  reader.onload = function(e) {
    document.getElementById('contents').innerHTML = e.target.result;
  }
  reader.readAsText(file)
}

Click the button then choose a file to see its contents displayed below.
<button onclick="openFile()">Open a file</button>
<input id="inp" type='file' style="visibility:hidden;" onchange="readFile(event)" />
<pre id="contents"></pre>

考虑将您的文件重新格式化为 javascript。然后您就可以使用旧的方法来加载它...

<script src="thefileIwantToLoad.js" defer></script>

在这种情况下，您可以将文件格式化为 base64 字符串以将其保存在 JavaScript 文件中。

这与“安全原因”无关。无论是本地文件还是网络驱动器上的文件都无关紧要。Windows 操作系统的解决方案可能是 IIS - Internet 信息服务 ，以下是一些详细信息：
要使用 Java Script window.open() 在浏览器中打开文件，该文件应该在 WEB 服务器上可用。
通过在 IIS 上创建映射到任何物理驱动器的虚拟目录，您应该能够打开文件。虚拟目录将有一些 http: 地址。因此， window.open("file:///D:/Hello.txt");
你会写 window.open("http://iis-server/MY_VIRTUAL_DRIVE_D/Hello.txt");

如果 Blob 足够好，则以下是在 TypeScript 中执行此操作的方法（许多用例不需要通过 FileReader 转换为 ByteArray/String）

function readFile({
  fileInput,
}: {
  fileInput: HTMLInputElement;
}): Promise<ArrayLike<Blob>> {
  return new Promise((resolve, reject) => {
    fileInput.addEventListener("change", () => {
      resolve(fileInput.files);
    });
  });
}

以下是如何在 vanilla javascript 中做到这一点

function readFile({
  fileInput,
}) {
  return new Promise((resolve, reject) => {
    fileInput.addEventListener("change", () => {
      resolve(fileInput.files);
    });
  });
}