如何使用JavaScript读写文件?


177

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


2
你为什么需要它?也许有解决方法。
Ionuț G. Stan,


1
实际上已经被问过很多次了
annakata

1
我找到了有关客户端文件存储的资源。html5rocks.com/zh-cn/tutorials/offline/storage从我收集的数据来看,HTML5实际上允许Websights将信息存储在用户的本地硬盘上,但存储方式更像数据库。浏览器管理文件存储并施加某些限制,以防止万维网将人们的硬盘加载到边缘。它们还不是完全傻瓜式的,但是至少根据本文而言,它们已经过调整。阅读详细信息。
加勒特

2
使用Ajax并配合PHP处理读写文件。如果要在客户端处理写入文件,则应该忘记它。这将需要在服务器上禁用许多安全选项,并且您将拥有一个极为不安全的站点。如果您不想使用PHP,则可以通过使用JavaScript Cookies在客户端计算机上存储数据来实现您想要的目标。
Dan Bray

Answers:


64

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

但是javascript本身允许这样做;可以使用服务器端javascript来完成。

请参阅Javascript File类上的文档

编辑:该链接是Oracle现在已移动的Sun文档。

为了与时俱进,这里是FileSystem类的node.js文档:http : //nodejs.org/docs/latest/api/fs.html

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


3
是否可以使用HTML5写入本地文件?
安德森·格林

1
另外,根据您的情况,您可以对php脚本进行ajax调用并以这种方式转储数据。这在我想存储在javascript端生成的一些数据的情况下很有用,但不管它如何到达那里。
Dustin Graham

1
@DustinGraham,实际上,现在有了Chrome API,我们实际上可以通过JavaScript将文件写入客户端了,对吗?
Pacerier,2015年

40

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


44
@marcgg:这使该答案不完整,并非不正确。而且,让我们面对现实吧,这个答案很可能确实涵盖了OP的用例。
Lightness Races in Orbit

36
如果OP计划在浏览器之外使用javascript,那么这很罕见,以至于他们可能会提到它。假定使用浏览器并非没有道理(绝对不是不正确的)。+1(以弥补marcgg的-1)。
Michael Martin-Smucker

2
@LightnessRacesinOrbit下投票按钮并不意味着答案被认为是错误的。其工具提示文字为This answer is not useful
S

1
@Mike —并不是在编写此答案的时候,默认情况下假设浏览器端JS仍然是合理的。
昆汀

16

未来就在这里!提案已接近完成,不再需要ActiveX,Flash或Java。现在我们可以使用:

您可以使用“拖放”将文件导入浏览器,也可以使用简单的上传控件。用户选择了文件后,即可使用Javascript进行读取:http : //www.html5rocks.com/zh-CN/tutorials/file/dndfiles/


现在链接已断开。
Prometheus

链接再次断开,它们都是相同的链接,但是含义不同。
Insidesin

@insidesin已修正
Thomas Shields

14

这是mozilla的建议

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

这是通过Spidermonkey和Adobe的extendscript中的编译开关实现的。另外(我认为)您在firefox扩展中获得File对象。

犀牛具有(相当粗鲁的)readFile函数 https://developer.mozilla.org/en/Rhino_Shell

要在Rhino中进行更复杂的文件操作,可以使用java.io.File方法。

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


12

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

1
ir = createElement('iframe'); -iframe是iFrame的ID。
温度

而且,它是否可以在所有操作系统上运行(只要选择了有效的文件位置?)
Anderson Green

4
这是一个很好的解决方案,但仅适用于IE吗?我尝试了IE和FF,使用FF则无法正常工作。
u.gen 2012年

9

如果您正在使用JScript(Microsoft的Javascript)通过WSH(在浏览器中没有!)进行本地脚本编写,则可以Scripting.FileSystemObject用来访问文件系统。

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

MSDN在这里


我想在一个hta应用程序中做到这一点,并解决了它
chiliNUT

8

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

使用原始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的也允许文件I / O从通过标签/窗口大赛IsolatedStorage。但是,使用此功能需要托管代码。需要编写此类代码的解决方案不在此问题的范围内。

当然,使用互补托管代码的解决方案完全可以解决这个问题;):

//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库,可建立统一的接口,该接口可用于在所有本机和某些非本机存储设施中进行通用存储操作。这是这个人维护的:)。



5

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

话虽如此,有几种方法可以解决您的问题,具体取决于您要执行的操作:

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

  2. Chrome支持文件系统,它是本地文件系统的沙盒部分。有关详情,请参见此页面。这可能为您提供了将内容临时保存在本地的功能。但是,其他浏览器不支持此功能。

  3. 如果您不仅限于浏览器,Node.js拥有完整的文件系统界面。请参见此处获取其文件系统文档。请注意,Node.js不仅可以在服务器上运行,而且可以在包括Windows在内的任何客户端计算机上运行。javascript测试运行程序Karma基于Node.js。如果您只想在本地计算机上用javascript编程,则可以选择。


3

创建文件尝试

function makefile(){
  var fso;
  var thefile;

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

    thefile.close()
    }

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


2

您必须转向Flash,Java或Silverlight。对于Silverlight,您将查看隔离存储。这样您就可以在用户磁盘上自己的游乐场中写入文件。但是,它不会让您在操场外书写。


1

您不能以任何跨浏览器的方式执行此操作。IE确实具有使“受信任”的应用程序能够使用ActiveX对象读取/写入文件的方法,但是很遗憾。

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


4
成为“受信任”应用程序的障碍到底是什么?确认对话?
布列塔尼

@Philip,没人说需要跨浏览器。每个浏览器都可以使用不同的解决方案。
Pacerier,2015年

1

通过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'会创建一个循环!


0

您不能使用javascript在客户端上进行文件i / o操作,因为这会带来安全风险。您要么必须让他们下载并运行exe,要么如果文件在您的服务器上,请使用AJAX和服务器端语言(例如PHP)在服务器端进行I / O


1
这不能为问题提供答案。要批评或要求作者澄清,请在其帖子下方发表评论。
harpun

@harpun,是的。请删除此答案并将其转换为评论。
Pacerier,2015年

0

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

  1. 使用JavaScript扩展

  2. 使用网页和Active X对象


-1

这是chrome v52 +的写解决方案(用户仍然需要选择目标文件...)
源: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 /文件

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.