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

Question

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

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

我一直在互联网上寻找一段时间。只有通过ActiveXObjects的IE有一些解决方案，我不能使用（IE，严重吗？）。 HTML5文件API的可用性有限，因为我无法访问所选文件的路径。

我还发现了textareas的保存对话框，但由于某些奇怪的原因他们忽略了换行符，如果可能的话，我不知道如何修复它。

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

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

Answer 1

有一个肮脏的黑客可以在不使用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

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

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

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

Answer 4

我的想法：

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

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

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

使用PHP实现所有这些都相对简单。来自textarea的换行符在PHP中保持为\ n。 教程：Form handling in PHP，File upload in PHP

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