web-dev-qa-db-ja.com

JavaScriptを使用したローカルファイルアクセス

JavaScriptで行われたローカルファイル操作はありますか？ AIRを必要とするようなインストールフットプリントなしで達成できるソリューションを探しています。

具体的には、ファイルからコンテンツを読み取り、それらのコンテンツを別のファイルに書き込みたいと思います。現時点では、これらのファイルに対する完全なアクセス許可を既に持っていると仮定して、アクセス許可を取得することについては心配していません。

javascriptfile-access
157
Jared

ユーザーが<input type="file">を介してファイルを選択した場合、 read および process を使用して File API を使用できます。

設計上、任意のファイルの読み取りまたは書き込みは許可されていません。それはサンドボックスの違反です。 Wikipedia-> Javascript-> Security ：

JavaScriptとDOMは、悪意のある作成者がWeb経由でクライアントコンピューターで実行するスクリプトを配信する可能性を提供します。ブラウザの作成者は、2つの制限を使用してこのリスクを抑えています。最初に、スクリプトはサンドボックスで実行され、そこではファイルに関連するなどの汎用プログラミングタスクではなく、Web関連のアクションのみを実行できます。

2016 UPDATE： Filesystem API を介してファイルシステムに直接アクセスできます。これは ChromeおよびOperaでのみサポート および 最終的に他のブラウザで実装されない場合があります （ Edgeの例外 ）。詳細については、 ケビンの答え を参照してください。

81
Chase Seibert

HTML5機能の更新 http://www.html5rocks.com/en/tutorials/file/dndfiles/ Javascriptでのローカルファイルアクセス。言及された記事の要約：

この仕様は、「ローカル」ファイルシステムからファイルにアクセスするための インターフェースをいくつか提供しています ：

  1. ファイル-個々のファイル。名前、ファイルサイズ、MIMEタイプ、ファイルハンドルへの参照などの読み取り専用情報を提供します。
  2. FileList-配列のようなFileオブジェクトのシーケンス。 （<input type="file" multiple>またはデスクトップからファイルのディレクトリをドラッグすると考えてください）。
  3. Blob-ファイルをバイト範囲にスライスできます。

-編集-

以下のポール・D・ウェイトのコメントを参照してください

157
Horst Walter

UPDATEこの機能はFirefox 17から削除されました（ https://bugzilla.mozilla.org/show_bug.cgi?id=を参照546848 ）。

Firefoxでは、プログラマーはJavaScriptファイル内からこれを行うことができます。

netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");

そして、あなた（ブラウザユーザー）はアクセスを許可するよう求められます。 （Firefoxの場合、ブラウザを起動するたびにこれを1回行うだけです）

ブラウザのユーザーが他のユーザーである場合、許可を与える必要があります。

21
Jason S

前述のように、 FileSystem および File APIを FileWriter APIとともに使用して、コンテキストのファイルからファイルを読み書きできます。ブラウザのタブ/ウィンドウからクライアントマシンへ。

FileSystem APIとFileWriter APIにはいくつかの注意事項がありますが、そのうちのいくつかは言及されましたが、繰り返す価値があります。

  • 現在、APIの実装はChromiumベースのブラウザ（Chrome＆Opera）にのみ存在します
  • どちらのAPIも2014年4月24日にW3C標準トラックから削除され、現在は独自仕様です
  • 将来のブラウザの実装から（現在は独自の）APIを削除する可能性があります
  • sandbox（ファイルが効果を発揮できないディスク上の場所）は、APIで作成されたファイルを保存するために使用されます
  • 仮想ファイルシステム（ブラウザ内からアクセスしたときと同じ形式でディスク上に必ずしも存在しないディレクトリ構造） APIで作成されたファイル

これらのことを行うために、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);

FileSystem APIとFileWriter APIはもはや標準化されていませんが、私の意見では、それらの使用は場合によっては正当化できます。

  • 未実装のブラウザベンダーからの新たな関心は、それらをすぐに元に戻すかもしれません
  • 実装（クロムベース）ブラウザの市場浸透率は高い
  • Google（Chromiumの主な貢献者）は、APIの提供とサポート終了の日付を指定していません

ただし、「いくつかのケース」があなた自身のものを包含するかどうかは、あなたが決めるべきです。

* BakedGoodsは、ここにいる他の誰にも管理されていません：）

18
Kevin

NW.jsを使用すると、通常ブラウザに設定されているすべてのセキュリティ制限なしに、Javascriptを使用してデスクトップアプリケーションを作成できます。したがって、関数を使用して実行可能ファイルを実行したり、ファイルを作成/編集/読み取り/書き込み/削除することができます。現在のCPU使用率や使用中の総RAMなど、ハードウェアにアクセスできます。

インストールを必要としないWindows、Linux、またはMacデスクトップアプリケーションを作成できます。

以下は、ユニバーサルGUIであるNW.jsのフレームワークです。

7
Jaredcheeda

Windowsに展開する場合、 Windows Script Host は、ファイルシステムおよびその他のローカルリソースに対して非常に便利なJScript APIを提供します。ただし、WSHスクリプトをローカルWebアプリケーションに組み込むことは、あなたが望むほどエレガントではないかもしれません。

6
Traphicone

次のような入力フィールドがある場合

<input type="file" id="file" name="file" onchange="add(event)"/>

BLOB形式のファイルコンテンツにアクセスできます。

function add(event){
  var userFile = document.getElementById('file');
  userFile.src = URL.createObjectURL(event.target.files[0]);
  var data = userFile.src;
}
4
Radek Mezuláník

FSO.js W3Cで標準化されている新しいHTML5 FileSystem APIをラップし、非常に簡単な読み取り方法を提供します。ローカルのサンドボックス化されたFileSystemへの書き込みまたはトラバース。非同期なので、ファイルIOはユーザーエクスペリエンスを妨げません。 :)

3
kwh

クライアント上のファイルシステム全体へのアクセス、ファイルの読み取り/書き込み、フォルダーの変更の監視、アプリケーションの起動、ドキュメントの暗号化または署名などが必要な場合は、JSFSをご覧ください。

AcitveXやJavaアプレットなどのブラウザープラグインテクノロジーを使用せずに、Webページからクライアント上のコンピューターリソースに安全かつ無制限にアクセスできます。ただし、ソフトウェアの平和もインストールする必要があります。

JSFSを使用するには、JavaおよびJava EE開発（サーブレット）の基本的な知識が必要です。

ここでJSFSを見つけてください： https://github.com/jsfsproject/jsfs 。 GPLの下で無料でライセンスされています

2
wimix

jsが必要とする可能性のあるファイルはすべてユーザーが直接許可する必要があると仮定すると、有名なブラウザーの作成者は一般的にjavascriptにファイルへのアクセスを許可しません。

ソリューションの主なアイデアは、javascriptがローカルURLを持つことでファイルにアクセスできないことです。しかし、DataURLを持つことでファイルを使用できます。したがって、ユーザーがファイルを参照して開く場合、jsは「URL」を取得する代わりにHTMLから「DataURL」を直接取得する必要があります。

次に、readAsDataURL関数とFileReaderオブジェクトを使用して、DataURLをファイルに変換します。ソースとニースの例を含むより完全なガイド：

https://developer.mozilla.org/en-US/docs/Web/API/FileReader?redirectlocale=en-US&redirectslug=DOM%2FFileReader

1
Makan Tayebi

クライアントコンピューターのファイルシステム全体の読み取りと書き込みに使用できる（商用）製品「localFS」があります。

小さなWindowsアプリをインストールし、小さな.jsファイルをページに含める必要があります。

セキュリティ機能として、ファイルシステムへのアクセスを1つのフォルダーに制限し、秘密キーで保護できます。

https://www.fathsoft.com/localfs

0
admirhodzic