javascript - 我如何允许用户将文件上传到我的站点，对其进行编辑并将其保存回来

Question

我正在构建一个非常简单的网络应用程序。没有 php - 只有 html 和 javascript。

我想为访问我网站的用户获取此用例:

1. 用户将从他/她的计算机中选择一个文本文件 - 例如:c:\directory\file.txt
2. 他将在我的网页中打开这个文件(我必须为此使用 php 吗？将文件上传到服务器然后在我的网站上显示它？如果我不想在我的服务器中使用数据 - 只是为了让用户编辑它——我可以在客户端用 js 完成所有这些操作吗？)
3. 他将编辑一些文本
4. 他将按下一个名为“保存”或“另存为”的按钮，它会自动将他的文件保存在他的计算机中。

因为我在文件管理方面一无所知 - 我很乐意得到一个提示，从哪里开始对管理文件的 js 库或有关文件的一般信息提出建议。

谢谢，阿隆

附注在网上搜索“上传文件”给了我很多关于如何将文件上传到 ftp 的结果 - 我的问题不是关于那个。

Answer 1

您似乎要求的通常需要像 php 这样的服务器端代码。

话虽如此，有一些方法可以仅使用 JavaScript 来完成此操作。代码将主要针对特定​​浏览器，并在保存时生成安全警告(因为让 JavaScript 使用这样的资源通常是不安全的)。具体我记得TiddlyWiki ，它只适用于 JavaScript 和 HTML。看看这样一个 TiddlyWiki 文件中的代码，里面有这样的代码:

// Returns null if it can't do it, false if there's an error, true if it saved OK
function mozillaSaveFile(filePath,content)
{
    if(window.Components) {
        try {
            netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
            var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
            file.initWithPath(filePath);
            if(!file.exists())
                file.create(0,0x01B4);// 0x01B4 = 0664
            var out = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream);
            out.init(file,0x22,0x04,null);
            out.write(content,content.length);
            out.flush();
            out.close();
            return true;
        } catch(ex) {
            return false;
        }
    }
    return null;
}

作为替代方案，根据您需要支持的浏览器，您可以查看 HTML5 的本地存储功能。