如何使用JavaScript读取和写入文件？

谁能给出一些使用JavaScript读写文件的示例代码？

519509 次浏览
小开

不。如果不禁用许多安全选项，浏览器端的JavaScript就无权写入客户端计算机。

小开

您无法以任何跨浏览器的方式执行此操作。IE确实有方法使“受信任的”应用程序能够使用ActiveX对象来读/写文件，但不幸的是，仅此而已。

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

小开

您不能使用JavaScript在客户端执行文件I/O，因为这会带来安全风险。您必须让它们下载并运行EXE，或者如果文件在您的服务器上，则使用Ajax和服务器端语言（如PHP）在服务器端执行I/O

小开

如果您正在使用JScript（Microsoft的JavaScript）通过WSH（而不是在浏览器中！）执行本地脚本，则可以使用Scripting.FileSystemObject来访问文件系统。

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

这里是MSDN

小开

这是Mozilla的提议。

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

这是通过SpiderMonkey和Adobe的ExtendScript中的编译开关实现的。此外（我认为）您可以在Firefox扩展中获得文件对象。

Rhino有一个（相当原始的）readfile函数 https://developer.mozilla.org/en/Rhino_Shell

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

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

小开

你必须求助于Flash、Java或Silverlight.对于Silverlight，您将看到隔离存储。这将让您在用户磁盘上写入您自己的文件。但它不会让你在操场外写作。

小开

为完整起见，OP并未说明他希望在浏览器中执行此操作（如果他这样做，则通常是不可能的）。

然而，JavaScript本身允许这样做；它可以通过服务器端的JavaScript来完成。

请参阅有关JavaScript文件类的文档

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

为了跟上时代的步伐，下面是FileSystem类的Node.JS文档：http://nodejs.org/docs/latest/api/fs.html

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

小开

创建文件树

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

小开

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

您可以使用拖放将文件放入浏览器，或者使用简单的上传控件。用户选择文件后，您可以通过JavaScript：http://www.html5rocks.com/en/tutorials/file/dndfiles/读取该文件

小开

此JavaScript函数向通过浏览器运行此函数的用户显示一个完整的“另存为”对话框。用户按下“确定”，文件即被保存。

编辑：以下代码仅适用于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");
小开

对于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应用程序，了解它如何做到这一点。

小开

在浏览器的上下文中，JavaScript可以读取用户指定的文件。有关使用文件API读取文件的详细信息，请参阅埃里克·比德尔曼的博客。 但是，基于浏览器的JavaScript无法在不禁用某些安全设置的情况下写入本地计算机的文件系统，因为任何网站任意更改本地文件系统都被视为安全威胁。

话虽如此，还是有一些方法可以解决这个问题，这取决于你想要做什么：

  1. 如果是自己的站点，可以在网页中嵌入Java小程序。但是，访问者必须在本地计算机上安装Java，并将收到有关安全风险的警报。访问者必须允许加载小程序。Java小程序就像一个可执行软件，可以完全访问本地计算机。

  2. Chrome支持的文件系统是本地文件系统的沙盒部分。有关详细信息，请参阅本页。这可能为您提供临时保存本地内容的功能。但是，其他浏览器不支持此功能。

  3. 如果你不局限于浏览器，Node.JS有一个完整的文件系统接口。有关其文件系统文档，请参见此处。请注意，Node.JS不仅可以在服务器上运行，还可以在任何客户端计算机（包括Windows）上运行。JavaScript测试运行器Karma基于Node.JS.如果您只想在本地计算机上使用JavaScript编程，这是一个选择。

小开

以下是Chrome V52+的写入解决方案（用户仍然需要选择目标DOE..）
来源：_农行_0

<!-- 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/文件

小开

目前，可以使用文件、文件写入器和文件系统 API从浏览器选项卡/窗口的上下文中写入和读取文件，但它们的使用存在注意事项（请参阅此答案的尾部）。

但回答你的问题：

使用烘焙商品*

写文件：

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){}
});

使用原始文件、文件写入器和文件系统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：

  • 当前仅在基于Chrome的浏览器（Chrome&；歌剧）
  • 已经脱离了W3C标准的轨道，到目前为止是专有的API.
  • 将来可能会从实现浏览器中删除。
  • 将文件的创建限制在磁盘上_0的_ABC（超出该位置，文件将不会产生任何效果）。

此外，文件系统规范没有定义有关如何在磁盘上显示目录结构的指导原则。例如，在基于Chrome的浏览器中，沙箱具有虚拟文件系统（不必以从浏览器内访问时的相同形式存在于磁盘上的目录结构），其中放置了用API创建的目录和文件。

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

如果您可以处理这些问题/限制，那么这些API几乎是执行您所要求的操作的唯一本机方法。

如果您对非本机解决方案持开放态度，Silverlight还允许通过隔离存储从选项卡/窗口进行文件I/O.但是，_需要ABC_1才能使用此功能。需要编写此类代码的解决方案超出了此问题的范围。

当然，使用互补托管代码的解决方案，只留下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库，它建立了一个统一的接口，可用于在所有本机和一些非本机存储设施中执行常见的存储操作。它是由这个家伙维护的：）。

小开

在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读写文件有两种方法

  1. 使用JavaScript扩展

  2. 使用网页和Active X对象

小开

为那些想要从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


提交答案