Question

有人可以提供一些示例代码来使用JavaScript读取和写入文件吗？

Answer 1

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

然而，javascript本身确实允许这样做;它可以通过服务器端javascript完成。

~~请参阅此documentation on the Javascript File class~~

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

为了跟上时间，请访问FileSystem类的node.js文档：http://nodejs.org/docs/latest/api/fs.html

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

Answer 2

没有。浏览器端javascript无权在没有许多安全选项被禁用的情况下写入客户端计算机

Answer 3

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

您可以使用拖放功能将文件导入浏览器或简单的上传控件。用户选择文件后，您可以使用Javascript：http://www.html5rocks.com/en/tutorials/file/dndfiles/

进行阅读

Answer 4

这是mozilla提案

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

这是通过spidermonkey中的编译开关实现的，也是在adobe的extendscript中实现的。另外（我认为）你在firefox扩展中获得了File对象。

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

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

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

Answer 5

此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");

Answer 6

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

如果您关闭了大量安全设置，我认为您可以在IE中访问同一个对象，但这将是一个非常非常糟糕的主意。

MSDN here

Answer 7

对于Firefox：

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应用，看看它是如何做到的。

Answer 8

目前，可以使用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){}
});

使用原始文件，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＆amp; Opera）中实施
已取消W3C标准，并且截至目前为专有API
将来可能会从实施浏览器中删除
在磁盘上将文件的创建限制在沙箱（文件无法生效的位置）

此外，FileSystem规范没有定义如何在磁盘上显示目录结构的指南。例如，在基于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库，它建立了一个统一的接口，可用于在所有本机和一些非本机存储设施中执行常见的存储操作。它由这个人维持在这里:)。

Answer 9

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

说，根据您的尝试，有一些方法可以解决这个问题：

如果它是您自己的站点，您可以在网页中嵌入Java Applet。但是，访问者必须在本地计算机上安装Java，并将收到有关安全风险的警报。访问者必须允许加载applet。 Java Applet就像一个可以完全访问本地计算机的可执行软件。
Chrome支持文件系统，该文件系统是本地文件系统的沙盒部分。有关详细信息，请参阅this page。这可能会让您暂时在本地保存。但是，其他浏览器不支持此功能。
如果您不仅限于浏览器，Node.js具有完整的文件系统界面。请参阅此处查看file system documentation。请注意，Node.js不仅可以在服务器上运行，还可以在包括Windows的任何客户端计算机上运行。 javascript测试运行器Karma基于Node.js.如果您只是想在本地计算机上使用javascript编程，这是一个选项。

Answer 10

您必须转向Flash，Java或Silverlight。对于Silverlight，您将看到Isolated Storage。这将使您在用户磁盘上写入您自己的游乐场中的文件。但它不会让你在游乐场外写字。

Answer 11

要创建文件，请尝试

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”的文件夹。

Answer 12

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

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

Answer 13

在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'会创建循环！

Answer 14

您无法使用javascript在客户端进行文件i / o，因为这会带来安全风险。您要么必须让它们下载并运行exe，要么如果文件在您的服务器上，请使用AJAX和服务器端语言（如PHP）在服务器端执行i / o

Answer 15

有两种使用JavaScript读写文件的方式

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

Answer 16

为希望从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

Answer 17

这是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 / Files

如何使用JavaScript读写文件？

17 个答案: