如何使用JavaScript读写文件?

2020/10/22 07:02 · javascript ·  · 0评论

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

为了完整起见,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/

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

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

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

这是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和闪存对象。

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

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

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

MSDN在这里

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

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

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

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

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

  3. 如果您不仅限于浏览器,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()
    }

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

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

您不能以任何跨浏览器的方式进行此操作。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在客户端上进行文件i / o操作,因为这会带来安全风险。您要么必须让他们下载并运行exe,要么如果文件在您的服务器上,请使用AJAX和服务器端语言(例如PHP)在服务器端进行I / O

有两种使用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

这是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 /文件

本文地址:http://javascript.askforanswer.com/ruheshiyongjavascriptduxiewenjian.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!