如何使用 JavaScript 读写文件？

为了完整起见，OP 并未声明他希望在浏览器中执行此操作（如果他是，如前所述，通常是不可能的）

但是 javascript 本身确实允许这样做；它可以用服务器端的javascript来完成。

看到这个 documentation on the Javascript File class

编辑：该链接指向现在已被 Oracle 移动的 Sun 文档。

为了跟上时代的步伐，这里是 FileSystem 类的 node.js 文档：http://nodejs.org/docs/latest/api/fs.html

Edit(2)：您现在可以使用 HTML5 在客户端读取文件：http://www.html5rocks.com/en/tutorials/file/dndfiles/

---

没有。浏览器端 javascript 没有权限写入客户端计算机，而无需禁用许多安全选项

---

未来就在这里！提案接近完成，不再有 ActiveX、flash 或 java。现在我们可以使用：

文件系统 API

本机拖放文件访问

您可以使用拖放将文件放入浏览器，或使用简单的上传控件。一旦用户选择了一个文件，您就可以使用 Javascript 来阅读它：http://www.html5rocks.com/en/tutorials/file/dndfiles/

---

这是 Mozilla 提案

http://www-archive.mozilla.org/js/js-file-object.html

这是通过 spidermonkey 和 adobe 的扩展脚本中的编译开关实现的。此外（我认为）您在 Firefox 扩展中获得了 File 对象。

rhino 有一个（相当粗略的）readFile 函数 https://developer.mozilla.org/en/Rhino_Shell

对于 rhino 中更复杂的文件操作，可以使用 java.io.File 方法。

但是，您不会在浏览器中获得任何这些东西。对于浏览器中的类似功能，您可以使用 HTML5 中的 SQL 数据库函数、客户端持久性、cookie 和闪存对象。

---

这个 Javascript 函数向通过浏览器运行它的用户呈现一个完整的“另存为”对话框。用户按 OK 并保存文件。

编辑：以下代码仅适用于 IE 浏览器，因为 Firefox 和 Chrome 认为此代码存在安全问题并已阻止其工作。

// content is the data you'll write to file<br/>
// filename is the filename<br/>
// what I did is use iFrame as a buffer, fill it up with text
function save_content_to_file(content, filename)
{
    var dlg = false;
    with(document){
     ir=createElement('iframe');
     ir.id='ifr';
     ir.location='about.blank';
     ir.style.display='none';
     body.appendChild(ir);
      with(getElementById('ifr').contentWindow.document){
           open("text/plain", "replace");
           charset = "utf-8";
           write(content);
           close();
           document.charset = "utf-8";
           dlg = execCommand('SaveAs', false, filename+'.txt');
       }
       body.removeChild(ir);
     }
    return dlg;
}

调用函数：

save_content_to_file("Hello", "C:\\test");

---

如果您使用 JScript（Microsoft 的 Javascript）使用 WSH 执行本地脚本（不在浏览器中！）您可以使用 Scripting.FileSystemObject 访问文件系统。

我认为如果你关闭很多安全设置，你可以在 IE 中访问同一个对象，但那将是一个非常非常糟糕的主意。

MSDN here

---

目前，可以使用 File、FileWriter 和 FileSystem API 从浏览器选项卡/窗口的上下文中写入和读取文件，尽管它们的使用有一些注意事项（请参阅此答案的尾部）。

但要回答你的问题：

使用 BakedGoods*

写入文件：

bakedGoods.set({
    data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

读取文件：

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

使用原始 File、FileWriter 和 FileSystem API

写入文件：

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

读取文件：

function onQuotaRequestSuccess(grantedQuota)
{

    function getfile(directoryEntry)
    {

        function readFile(fileEntry)
        {

            function read(file)
            {
                var fileReader = new FileReader();

                fileReader.onload = function(){var fileData = fileReader.result};
                fileReader.readAsText(file);             
            }

            fileEntry.file(read);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: false},
            readFile
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, getFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

正是你要求的对吗？也许，也许不是。后两个 API：

目前仅在基于 Chromium 的浏览器（Chrome 和 Opera）中实现

已脱离 W3C 标准轨道，目前是专有 API

将来可能会从实施浏览器中删除

将文件的创建限制在磁盘上的沙箱（文件在其之外不会产生影响的位置）

此外，文件系统规范没有定义目录结构在磁盘上的显示方式。例如，在基于 Chromium 的浏览器中，沙箱有一个虚拟文件系统（一个目录结构，它不一定以与从浏览器中访问时相同的形式存在于磁盘上），其中使用放置 API。

因此，尽管您可以使用 API 将文件写入系统，但在没有 API（好吧，没有 FileSystem API）的情况下定位文件可能不是一件容易的事。

如果您可以处理这些问题/限制，那么这些 API 几乎是完成您所要求的事情的唯一本地方式。

如果您愿意接受非本地解决方案，Silverlight 还允许通过 IsolatedStorage 从选项卡/窗口竞赛中进行文件 i/o。但是，需要 managed code 才能使用此功能；需要编写此类代码的解决方案超出了此问题的范围。

当然，使用补充托管代码的解决方案，只留下一个 Javascript 来编写，完全在这个问题的范围内；）：

//Write file to first of either FileSystem or IsolatedStorage
bakedGoods.set({
    data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem", "silverlight"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

* BakedGoods 是一个 Javascript 库，它建立了一个统一的接口，可用于在所有原生和一些非原生存储设施中进行常见的存储操作。它是由这个人在这里维护的:)。

---

对于火狐：

var file = Components.classes["@mozilla.org/file/local;1"].
       createInstance(Components.interfaces.nsILocalFile);
file.initWithPath("/home");

请参阅https://developer.mozilla.org/en-US/docs/Code_snippets/File_I_O

对于其他人，请查看 TiddlyWiki 应用以了解它是如何做到的。

---

在浏览器的上下文中，Javascript 可以读取用户指定的文件。有关使用 File API 读取文件的详细信息，请参阅 Eric Bidelman's blog。但是，基于浏览器的 Javascript 无法在不禁用某些安全设置的情况下写入本地计算机的文件系统，因为任何网站任意更改本地文件系统都被视为安全威胁。

话虽如此，有一些方法可以解决它，具体取决于您要执行的操作：

如果是您自己的站点，您可以在网页中嵌入 Java Applet。但是，访问者必须在本地计算机上安装 Java，并且会收到有关安全风险的警报。访问者必须允许加载小程序。 Java Applet 就像一个可执行软件，可以完全访问本地计算机。 Chrome 支持的文件系统是本地文件系统的沙盒部分。有关详细信息，请参阅此页面。这为您提供了在本地临时保存东西的可能。但是，其他浏览器不支持此功能。如果你不局限于浏览器，Node.js 有一个完整的文件系统接口。有关其文件系统文档，请参见此处。请注意，Node.js 不仅可以在服务器上运行，还可以在包括 windows 在内的任何客户端计算机上运行。 javascript 测试运行器 Karma 基于 Node.js。如果您只是想在本地计算机上使用 javascript 编程，这是一个选项。

---

创建文件尝试

function makefile(){
  var fso;
  var thefile;

    fso = new ActiveXObject("Scripting.FileSystemObject");
    thefile=fso.CreateTextFile("C:\\tmp\\MyFile.txt",true);

    thefile.close()
    }

在 C 驱动器中创建您的目录，因为 Windows 具有防止从 Web 写入的安全性，例如在 C 驱动器中创建名为“tmp”的文件夹。

---

您将不得不求助于 Flash、Java 或 Silverlight。对于 Silverlight，您将看到 Isolated Storage。这将使您在用户磁盘上自己的操场上写入文件。但它不会让你在操场外写作。

---

您不能以任何跨浏览器的方式执行此操作。 IE 确实有一些方法可以使“受信任的”应用程序使用 ActiveX 对象来读/写文件，但不幸的是它就是这样。

如果您希望保存用户信息，您很可能需要使用 cookie。

---

在 ReactJS 测试中，以下代码成功写入了一个文件：

import writeJsonFile from 'write-json-file';

const ans = 42;
writeJsonFile('answer.txt', ans);

const json = {"answer": ans};
writeJsonFile('answer_json.txt', json);

该文件被写入包含测试的目录，因此写入实际的 JSON 文件“*.json”会创建一个循环！

---

为想要从 javascript 下载包含特定内容的文件的人编写此答案。我也在为同样的事情而苦苦挣扎。

const data = {name: 'Ronn', age: 27};              //sample json
const a = document.createElement('a');
const blob = new Blob([JSON.stringify(data)]);
a.href = URL.createObjectURL(blob);
a.download = 'sample-profile';                     //filename to download
a.click();

在此处查看 Blob 文档 - Blob MDN

---

您不能使用 javascript 在客户端执行文件 i/o，因为这会带来安全风险。您必须让他们下载并运行 exe，或者如果文件在您的服务器上，请使用 AJAX 和 PHP 等服务器端语言在服务器端执行 i/o

---

使用 JavaScript 读取和写入文件有两种方法

使用 JavaScript 扩展 使用网页和 Active X 对象

---

这是 chrome v52+ 的编写解决方案（用户仍然需要选择目标 doe...）
来源：StreamSaver.js

<!-- load StreamSaver.js before streams polyfill to detect support -->
<script src="StreamSaver.js"></script>
<script src="https://wzrd.in/standalone/web-streams-polyfill@latest"></script>

const writeStream = streamSaver.createWriteStream('filename.txt')
const encoder = new TextEncoder
let data = 'a'.repeat(1024)
let uint8array = encoder.encode(data + "\n\n")

writeStream.write(uint8array) // must be uInt8array
writeStream.close()

最适合写入在客户端生成的大数据。
否则我建议使用 FileSaver.js 来保存 Blob/文件

---