无需刷新即可进行简单的客户端文件处理

Simple client-side file processing without refresh

本文关键字：简单 客户端 文件 处理 刷新      更新时间：2023-09-26

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

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

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

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

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

为了方便起见，这里有一个打开和打印文本文件的示例：

<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的例子。

相关文章：