web-dev-qa-db-ja.com

HTML5では、ブラウザー内からローカルクライアントファイルを操作できますか

Webページによるクライアントマシン上のファイルへのアクセスに関するいくつかの投稿、つまり question を見てきました。

ユーザーがWebページにアクセスするだけで最新バージョンにアクセスできるように、作成しているアルゴリズムの「クラウドでの継続的な更新」パラダイムを利用しようとしています。これには、プログラム/ウェブページがディレクトリから始まり、その中のファイルを再帰的に検査し、見つかったものに基づいて結果を計算できることが必要です。最後に、結果ファイルをクライアントのファイルシステムに書き込むこともできるはずです。

その前の質問の回答の1つはGoogle Gearsについて言及していますが、それ以降HTML5のために中止されました。 HTML5内でクライアントディレクトリにアクセスできますか？どうやって？

ローカルファイルへのWebページによるアクセスがセキュリティリスクになる理由はわかっていますが、私の目的では、ユーザーに適切なアクセス許可を要求しても問題はありません。

securityfile-iohtmlfilesystems
32
greye

いいえ、少なくとも直接ではありません。ただし、ここにはいくつかの選択肢があります。

現在、あなたの最良の選択は次のとおりです。

  • デスクトップからファイルをドラッグアンドドロップします。 チュートリアル を参照してください。
  • 入力タイプファイルを使用します。
    • File APIで内容を読み取るか、フォームを送信します。ファイルの動的な読み取りについて Mozilla Developer Center の詳細をご覧ください。
    • multiple属性を指定すると、個別のフィールドを持たなくても、複数のファイルを一度に読み取って開くことができます。
    • 入力を非表示にして、「クリックをトリガー」して、ファイルを開くダイアログを開くことができます。詳細については、前のMozilla Developer Centerのリンクを参照してください。
  • FileSystem API を使用すると、ファイルシステム上のファイルを作成、削除、読み取り、変更できます。注：サンドボックス化されたディレクトリを操作すると、そのようにシステム全体にアクセスすることはできません。
  • Java with signed applets を使用してファイルシステム全体にアクセスします。これには、ユーザーが署名を受け入れる必要があります。
30
Tower

Chrome 6はFile APIもサポートします

2
Vanuan

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

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

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

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

FileSystem APIとFileWriter APIの現在のステータスを考えると、ファイルの読み取りと書き込みへのそれらの使用は、現在、これらのことを行う「HTML5の方法」を構成していません。

ただし、実装されていないブラウザベンダーからのAPIへの関心が高まっているため、標準化の道筋に戻る可能性があります。それは、Chromiumベースのブラウザーの高い市場浸透と、Google（Chromiumへの主な貢献者）がAPIに提供しておらず、サポート終了日がAPIに与えられていないという事実と相まって、場合によってはAPIの使用を正当化するのに十分なはずです。

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

0
Kevin