HTML5 / JavaScript：打开文本文件，加载到文本区域/将文本区域内容保存到文本文件

Question

我想在我的浏览器中做两件事：

• 将文本文件加载到文本区域（必须通过对话框选择）
• 将文本区域的内容保存到文本文件中（必须再次通过对话框选择）
• 加载视频文件并获取文件路径以将其与视频播放器一起使用 ( 1 )

我已经在 inte.net 上四处寻找了一段时间。 有一些仅通过 ActiveXObjects 的 IE 解决方案，我不能使用（IE，认真的吗？）。 HTML5 文件 API 的可用性有限，因为我无法访问所选文件的路径。

我还找到了文本区域的保存对话框，但由于某些奇怪的原因，它们忽略了换行符，我不知道如何解决这个问题，如果可能的话。

所以这是我的要求和选择：

• 支持 FF 和 Chrome
• JavaScript、HTML5（和 PHP，如果必须的话）
• 可能是 Silverlight，但我不是很熟悉它，只能复制和粘贴：-/
• 它也必须在 Mac 上工作

Answer 1

有一个肮脏的 hack 可以在不求助于 Flash 或 Silverlight 或使用服务器的情况下完成工作，并且它适用于大多数浏览器：

var uriContent = "data:application/octet-stream," + encodeURIComponent(fileContentsAsString);
window.open(uriContent, 'Save Your File');

Answer 2

JS 在沙箱中运行。 这意味着：无法访问文件系统上的文件。 HTML5 文件 API 是第一个“本地”（不是 flash 也不是 activex）尝试授予对用户文件系统的有限访问权限。

Answer 3

文件 API 是 HTML，它允许您访问数据，之后您可以在 JavaScript 中操作二进制 blob，但是根据您的要求，这在纯 JS 和 HTML 中是不可能的。

最大的障碍是“保存到文本文件”。 我能够做到这一点的唯一方法是打开一个调用服务器端语言（例如 PHP）的 iFrame，将 header 中的内容类型设置为提示下载的类型。

Flash 和 Silverlight 是在沙箱之外运行的“客户端”技术，这听起来像是您目前唯一的选择。

Answer 4

我的想法：

加载文本文件：使用普通的 HTML 上传表单（如果你想编写脚本，可以通过 AJAX 提交）

保存文本文件：使用文本区域并在提交后在服务器端创建文件，然后提供下载。 （如前所述，客户端脚本无法访问计算机的文件系统）

加载视频文件：服务器上是否已经有视频？ 否则将需要像文本文件一样上传。 然后使用 flash 插件从服务器播放文件（到时候你应该知道 URI）

所有这些都相对简单地使用 PHP 来实现。textarea 的换行符在 PHP 中保持为 \n。教程：PHP 中的表单处理，PHP中的文件上传

编辑：由于 PHP 在服务器端运行，您应该不会因为浏览器的多样性而遇到很多问题。 或者，您也可以在 Flash 或 Silverlight 中完成所有这些操作，尽管从我的角度来看，这需要更多的学习并且对用户来说不太舒服。