JavaScriptによるローカルファイルアクセス


177

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

具体的には、ファイルからコンテンツを読み取り、それらのコンテンツを別のファイルに書き込みます。この時点では、権限の取得について心配していませんが、これらのファイルに対する完全な権限をすでに持っていると想定しています。


回答:


87

ユーザーがを介してファイルを選択した場合、File APIを使用してそのファイルを読み取り処理<input type="file">できます

設計により、任意のファイルの読み取りまたは書き込みは許可されていません。これはサンドボックスの違反です。ウィキペディアから-> Javascript->セキュリティ

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

2016 UPDATE:直接ファイルシステムへのアクセスを介して可能であるファイルシステムAPIされ、唯一のクロム、オペラによって支持および他のブラウザによって実装されていない終わることがあり(とエッジを除きます)。詳細については、ケビンの回答を参照してください。


28
くそー。もちろん、これはばかげています。Javascriptは、おそらくアプリケーションに依存しないスクリプト言語です。すべてのアプリケーションがWebブラウザであるとは限りません。たとえば、Photoshopのスクリプト作成に興味があるため、ここに来ました。一部のアプリケーションがファイルアクセスクラスを提供しない場合でも、それらを適切な場所でそれらのアプリケーション用に標準化することは理にかなっています。Photoshopで学んだことは、ファイルアクセスを許可する他のJavaScriptホストにも移植できません。
Steve314

27
Javascript言語を使用して、ホスティング環境で許可されていることをすべて実行します。SpiderMonkeyは、他の言語ができることなら何でもできます。ブラウザの Javascript はサンドボックス化されています。

35
この答えは3年前は正しかったかもしれませんが、間違いなくもう正解ではありません。HTML5に関する@Horst Walterの回答をご覧ください。または、こちらにアクセス
james.garriss

@ james.garrissええ、実際、3年前もそれほど正確ではありませんでした。このページには、どのように/ 2003年のFirefoxのバックで読み書きを教えてくれたweb.archive.org/web/20031229011919/http://www.captain.at/...(XPCOMとブラウザでXULのためのエージェントbulitが、利用可能)を、Microsoftが持っていました1990年代のnode.jsスタイルのJAVAスクリプトシェルスクリプト(およびActiveXを使用してブラウザーで使用できるFileIO)
original_username

もはや不可能
SysDragon 2015年

158

HTML5機能のアップデートはhttp://www.html5rocks.com/en/tutorials/file/dndfiles/にあります。この優れた記事では、JavaScriptでのローカルファイルアクセスについて詳しく説明します。上記の記事の要約:

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

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

以下のPaul D. Waiteのコメントを参照してください。


7
これは、JavaやFlashプラグインを使用しているような真のファイルシステムではありません。たとえば、ユーザーが自分で選択しない限り、ユーザーのデスクトップ上のファイルを一覧表示することはできません。
Pacerier

9
これらのAPIは廃止されているようです。w3.org / TR
Paul D. Waite

4
W3Cの便利なテクノロジーを奪うためのフォームがあるため、注意が必要です。ファイルシステムAPIは、Chromeでのみ実装されており、今後は機能しません。ファイル APIは、普遍的なたサポートとして受け入れられているW3Cのワーキングドラフトと、私たちはもはやそれなしの生活を想像することはできません。もちろん、私たちはまだブラウザーの中にいるので、ユーザーがファイルを持ってくるまで待つ必要がありますが、これはWebアプリの範囲を劇的に拡大し、すぐにはなくなることはありません。
bbsimonbb

21

更新この機能はFirefox 17以降では削除されていますhttps://bugzilla.mozilla.org/show_bug.cgi?id=546848を参照)。


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

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

そして、あなた(ブラウザユーザー)はアクセスを許可するように促されます。(Firefoxの場合は、ブラウザを起動するたびにこれを行う必要があります)

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


6
これにより、非推奨であり、拡張機能でのみ実行でき、ウェブサイトのJavaScriptでは実行できないというエラーが発生します
Esailija

4
このリンクが示すように、この機能は新しいFirefoxバージョンでは削除されています。support.mozilla.org/en-US/questions/944433
Makan Tayebi

3
ああ、それは最低だ。私はセキュリティなどすべてを手に入れましたが、独自のJavaScriptファイルをローカルで実行するために信頼を付与する方法が必要です。
Jason S

承知しました。そして、私はこれを行う別の方法をまだ見つけていません。
Makan Tayebi 2013

2
回答を更新して、非推奨であることを示してください。ありがとう。
jpaugh

20

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

FileSystem APIとFileWriter APIに関連するいくつかの点に注意する必要があります。これらのいくつかについては言及しましたが、繰り返す価値があります。

  • 現在、APIの実装はChromiumベースのブラウザー(ChromeおよびOpera)にのみ存在します
  • どちらのAPIも2014年4月24日にW3C標準トラックから外され、現在は独自仕様です
  • 将来的にはブラウザーの実装から(現在は独自仕様の)APIを削除する可能性があります
  • サンドボックス(ファイルは効果を生み出すことができないそのディスク外側の位置)を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は標準トラックには含まれていませんが、私の意見では、これらの使用は正当化できる場合があります。理由は次のとおりです。

  • 実装されていないブラウザーベンダーからの新たな関心により、ブラウザーベンダーはすぐに再配置される可能性があります。
  • 実装(Chromiumベース)ブラウザーの市場浸透率は高い
  • Google(Chromiumへの主な貢献者)は、APIにサポート終了日を示していません

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

* BakedGoodsは、この男以外の誰もがここで管理しています:)


7

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

インストールが不要なWindows、Linux、Macデスクトップアプリケーションを作成できます。

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


1
JavaScriptデスクトップアプリケーションと同様のフレームワークであるElectronを使用してローカルファイルにアクセスすることもできます。
アンダーソングリーン

6

Windowsにデプロイする場合、Windowsスクリプトホストは、ファイルシステムやその他のローカルリソースに非常に役立つJScript APIを提供します。ただし、WSHスクリプトをローカルWebアプリケーションに組み込むと、思ったほど洗練されない場合があります。


3
Macプラットフォームのための同等の解決がない限り、Windowsスクリプトホストは、それを満たしていないので、私は、(少なくとも、WindowsとMacの間で)、OSに依存しないように解決策が欲しい
ジャレド

5

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

<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

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


1
FSO.jsは現在、IE、Mozilla、またはSafariではサポートされていません。
Phillip Senn

2

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

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

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

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


1

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

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

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

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


0

クライアントコンピュータ上のファイルシステム全体を読み書きするために使用できる(商用)製品「localFS」があります。

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

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

https://www.fathsoft.com/localfs


-4

angularjs&aspnet / mvcを使用している場合、jsonファイルを取得するには、Web設定でMIMEタイプを許可する必要があります

<staticContent>
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
  </staticContent>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.