web-dev-qa-db-ja.com

Webページを介してローカルファイルを読み書きするにはどうすればよいですか？

HTMLベースのアプリを作成していて、ローカルファイルからデータを保存および取得したいと考えています。このアプリはウェブサーバーでホストされません。

誰かがこれをどのように行うことができるかについてのトピックを啓発するのを手伝ってくれますか？

javascripthtmllocal-storageread-write
12
praneybehl

HTML5のFileSystemAPIを使用する必要があります。

window.requestFileSystem(window.TEMPORARY, 5*1024*1024, function(){
    fs.root.getFile('test.dat', {}, function(fileEntry) {
        fileEntry.file(function(file) {
            // Here is our file object ... 
        });
    });
}, errorHandler);

チェックアウト FileSystem API 詳細については

HTML5テスト にアクセスして、ブラウザのサポートをテストしてください

2
Daniil Ryzhkov

HTML 5 FileSystemAPIをお試しください

以下のリンクに詳細があります

http://dev.w3.org/2009/dap/file-system/pub/FileSystem/

http://www.html5rocks.com/en/tutorials/file/filesystem/

2
Mathew Joseph

この質問への回答は、次の質問への回答によって異なります。

  • 現在、ファイルの書き込みのサポートはChromiumベースのブラウザー（ChromeとOpera）にのみ存在するという事実に問題はありませんか？
  • このような機能を利用するために、現在の独自のAPIを利用しても問題ありませんか？
  • 将来、上記のAPIが削除される可能性はありますか？
  • 上記のAPIで作成されたファイルをディスク上のサンドボックス（ファイルが影響を及ぼさない場所）に制限しても問題ありませんか？
  • 仮想ファイルシステム（からアクセスしたときと同じ形式でディスク上に必ずしも存在しないディレクトリ構造）を使用しても問題ありませんか？ブラウザ内）そのようなファイルを表すには？

上記のすべてに「はい」と答えた場合は、 File 、 FileWriter 、および FileSystem APIを使用して、コンテキストからファイルを書き込むことができます。 Javascriptを使用したブラウザタブ/ウィンドウの作成。

どのように、あなたは尋ねましたか？

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){}
});

raw 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);

しかし、最初に質問のいずれかに「いいえ」と答えた場合はどうなりますか？

非ネイティブソリューションを利用できる場合、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){}
});

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

1
Kevin

プラットフォームがIEである場合のみ）、HTA（HTMLアプリケーション）フレームワークを活用できます。

http://msdn.Microsoft.com/en-us/library/ms536471（VS.85）.aspx

これを使用するアプリケーションにはシステムレベルの特権が付与され、Windows Scripting Hostと同じオブジェクト（たとえば、ローカルファイルを読み取ってアクセスするためのファイルシステムオブジェクト）を使用できます。

私は過去に小規模なワークグループアプリケーションでこれをうまく使用し、気に入っていましたが、これはIEのみの企業環境でした。

0
Jim Davis