javascript - 简单的客户端文件处理，无需刷新

Question

JavaScript以下用例的干净简单的解决方案是什么：

在网页上，用户从她的本地文​​件系统中选择并上传一个文本文件，但不是将文件加载到服务器，而是客户端 javascript 代码打开并处理文件的内容，并将结果写入同一页面无需刷新页面。

注意：我不需要保留文件的内容——如果用户关闭页面，那么内容就会丢失，这很好。一切都应该发生在客户端的页面上——无需接触服务器。

如果有一些轻量级JQuery的插件，很想知道！

Answer 1

您所说的是 HTML5 File API。我不确定描述它的最佳链接是什么，但这可能会有所帮助。https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Answer 2

为方便起见，以下是打开和打印文本文件的示例：

<input type='file' id='file-input' />

let fileInput = document.getElementById('file-input')

fileInput.onchange = () => {
  const reader = new FileReader()
  reader.onload = (e) => console.log('file contents:', e.target.result)

  for (let file of fileInput.files) {
    reader.readAsText(file)
  }
}

JayC 提供的链接也有 readAsBinary 和 readAsDataURL 的示例。