web-dev-qa-db-ja.com

JavaScriptを使用してファイルを読み書きする方法

JavaScriptを使用してファイルを読み書きするためのサンプルコードを誰かに提供できますか?

165
ABC

完全を期すために、OPはブラウザでこれを実行しようとしているとは述べていません(すでに述べたように、一般的には不可能です)。

しかし、JavaScript自体はこれを許可しています。サーバーサイドのJavaScriptで実行できます。

これを参照してください Javascript Fileクラスのドキュメント

編集:そのリンクは、現在Oracleによって移動されているSunのドキュメントへのリンクです。

時代を追いかけるために、FileSystemクラスのnode.jsドキュメントがあります。 http://nodejs.org/docs/latest/api/fs.html

編集(2):HTML5で今すぐクライアント側のファイルを読むことができます: http://www.html5rocks.com/en/tutorials/file/dndfiles /

60
DanSingerman

いいえ、できません。ブラウザサイドのJavaScriptには、多くのセキュリティオプションを無効にしなければ、クライアントマシンに書き込む権限がありません。

36
Gareth

未来はここにあります!提案は完成に近づいており、ActiveX、Flash、Javaはこれ以上ありません。今我々は使用することができます:

ドラッグアンドドロップを使用してファイルをブラウザに取り込むことも、単純なアップロードコントロールを使用することもできます。ユーザーがファイルを選択したら、それをJavascript付きで読むことができます。 http://www.html5rocks.com/en/tutorials/file/dndfiles/

15
Thomas Shields

これがmozillaの提案です

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

これは、spidermonkeyのコンパイルスイッチとAdobeのextendcriptで実装されています。さらに(私は思う)あなたはFirefoxの拡張機能でFileオブジェクトを取得します。

rhinoは(かなり基本的でない)readFile関数を持っています https://developer.mozilla.org/en/Rhino_Shell

rhinoでより複雑なファイル操作をするには、Java.io.Fileメソッドを使うことができます。

あなたはブラウザでこれらのもののいずれも取得できません。ブラウザで同様の機能を実現するには、HTML 5のSQLデータベース機能、クライアントサイドの永続性、Cookie、およびフラッシュストレージオブジェクトを使用できます。

14
Breton

このJavascript関数は、ブラウザを介してこれを実行するユーザーに完全な[名前を付けて保存]ダイアログボックスを表示します。ユーザーは[OK]を押してファイルを保存します。

編集:FirefoxおよびChromeはこのコードをセキュリティ上の問題と見なし、機能しなくしているため、次のコードはIEブラウザでのみ機能します。

// 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");
11
Temp

ブラウザではなくWSHを使用してローカルスクリプトを実行するためにJScript(MicrosoftのJavascript)を使用している場合は、ファイルシステムにアクセスするためにScripting.FileSystemObjectを使用できます。

たくさんのセキュリティ設定を無効にすれば、IE内の同じオブジェクトにアクセスできると思いますが、それは非常に悪い考えです。

MSDNはこちら

8
Dana Robinson

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 アプリをご覧ください。

7

現在のところ、 FileFileWriter 、および 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);

ちょうどあなたが権利を求めたの?多分そうでないかもしれません。後者の2つのAPI:

  • 現在Chromiumベースのブラウザ(Chrome&Opera)でのみ実装されています
  • W3C標準化過程から外されました、そして今のところ独自のAPIです
  • 将来実装されているブラウザから削除される可能性があります
  • ファイルの作成をディスク上のサンドボックス(それ以外の場所ではファイルが効果を発揮できない場所)に限定します。

さらに、FileSystem仕様には、ディレクトリ構造をディスク上に表示する方法に関するガイドラインは定義されていません。たとえばChromiumベースのブラウザでは、サンドボックスに仮想ファイルシステム(必ずしもディスク上に存在するとは限らないディレクトリ構造)があります。 API内で作成されたディレクトリとファイルが配置されているブラウザ内からアクセスされたときに実行されます。

そのため、APIを使用してファイルをシステムに書き込むことはできますが、APIを使用せずに(つまりFileSystem APIを使用せずに)ファイルを見つけるのは容易ではありません。

あなたがこれらの問題/制限に対処することができるならば、これらのAPIはあなたが尋ねたことをするためのほとんど唯一のネイティブな方法です。

もしあなたがネイティブではない解決策に寛容であれば、Silverlightは IsolatedStorage を通してタブ/ウィンドウコンテストからのファイルI/Oも可能にします。ただし、この機能を利用するには マネージコード が必要です。そのようなコードを書くことを必要とする解決策はこの質問の範囲外です。

もちろん、補完的なマネージドコードを利用し、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ライブラリです。それはここでこの男によって維持されています:)

5
Kevin

ブラウザのコンテキストでは、Javascriptはユーザー指定のファイルを読み取ることができます。 File APIを使ったファイルの読み込みについての詳細は Eric Bidelmanのブログ を参照してください。ただし、ブラウザベースのJavascriptでは、一部のセキュリティ設定を無効にせずにローカルコンピュータのファイルシステムを書き込むことはできません。これは、任意のWebサイトでローカルファイルシステムを任意に変更することがセキュリティ上の脅威とみなされるためです。

それを言って、あなたがやろうとしていることに応じてそれを回避するいくつかの方法があります。

  1. 自分のサイトの場合は、WebページにJavaアプレットを埋め込むことができます。ただし、訪問者はローカルマシンにJavaをインストールする必要があり、セキュリティ上のリスクについて警告されます。訪問者はアプレットをロードできるようにする必要があります。 Javaアプレットは、ローカルコンピュータに完全にアクセスできる実行可能ソフトウェアのようなものです。

  2. Chromeはローカルファイルシステムのサンドボックス化された部分であるファイルシステムをサポートします。詳しくは このページ をご覧ください。これはおそらくあなたが一時的にローカルにものを保存するためのものです。ただし、これは他のブラウザではサポートされていません。

  3. あなたがブラウザに限定されないならば、Node.jsは完全なファイルシステムインタフェースを持っています。 ファイルシステムのドキュメント についてはこちらをご覧ください。 Node.jsはサーバー上だけでなく、ウィンドウを含むすべてのクライアントコンピューター上でも実行できることに注意してください。 JavaScriptのテストランナーKarmaはNode.jsに基づいています。ローカルコンピュータ上でJavaScriptでプログラムするだけの場合は、これが選択肢です。

4
gm2008

ファイルを作成するには

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"という名前のフォルダを作成します。

2
Ifiok Idiang

Flash、Java、またはSilverlightを使う必要があります。 Silverlightの場合は、 Isolated Storage になります。それはあなたがユーザーのディスク上のあなた自身の遊び場でファイルに書くのを得るでしょう。それはあなたがあなたの遊び場の外に書くことはできませんが。

2
Cory R. King

あなたはこれをクロスブラウザの方法で行うことはできません。 IEには、「信頼できる」アプリケーションがActiveXオブジェクトを使用してファイルを読み書きできるようにするメソッドがありますが、残念ながらそれは残念です。

あなたがユーザー情報を保存しようとしているならば、おそらくクッキーを使う必要があるでしょう。

1
Philip Reynolds

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'に書き込むとループが発生します。

1
Steve Pitchers

セキュリティ上のリスクがあるため、JavaScriptを使用してクライアント側でファイルI/Oを実行することはできません。 exeをダウンロードして実行するか、ファイルがサーバー上にある場合はAJAXとPHPなどのサーバー側の言語を使用して実行する必要があります。サーバーサイドのI/O

0
Click Upvote

JavaScriptを使用してファイルを読み書きするには2つの方法があります。

  1. JavaScript拡張機能を使う

  2. WebページとActive Xオブジェクトを使う

0
Grigor IWT