JavaScriptを使ってファイル（ユーザディレクトリ）に書き込む方法は？

Question

html5とjavascriptまたはjqueryを使用してchrome（すべてのバージョン）の任意のファイルのtxtに書きたいと思います。私は、私が試したファイルシステムAPIとコードを試してみました

は次のとおりです。

 
function onFs(fs) { 
console.log('test'); 
    fs.root.getFile('log.txt', {create: true, exclusive: true}, 
     function(fileEntry) { 
     // fileEntry.isFile === true 
     // fileEntry.name == 'log.txt' 
     // fileEntry.fullPath == '/log.txt' 

     fileEntry.getMetaData(function(md) { 
      console.log(md.modificationTime.toDateString()); 
     }, onError); 

     }, 
     onError 
); 
} 

window.webkitRequestFileSystem(TEMPORARY, 1024*1024 /*1MB*/, onFs); 

しかし、働いていません。

ファイルに書き込む方法はありますか？

Answer 1

I want to write file in user directory

ユーザーファイルシステムに直接ファイルを書き込むことはできません。

正確に質問を解決するために同様の質問のためのSO検索した後、 Where does PERSISTENT file system storage store with chrome?で@Iainによって掲示この answer次plnkrで作成されたファイルの内容 $ catすることができました。ファイルは ~/.config/[chrome, chromium]ディレクトリのユーザファイルシステムに書き込まれました。ディレクトリを確認する

~/.config/[chrome, chromium]/Default/File System 

に移動し、ファイルマネージャを使用し

。下に書かれたテキストを含むファイルは、2桁の数字をフォルダ名として、さらに2つのサブディレクトリ内に見つかった。フォルダ名として単一の小文字を有するサブディレクトリと、このサブディレクトリ内には、フォルダ名として2桁の別のサブディレクトリがありました。 window.webkitRequestFileSystemによって書かれたファイルは、正しいが、"text/plain" MIMEタイプを持つが、拡張子なしでファイル名として8桁の数字を持つ。 Blobtypeプロパティで設定します。

その後terminal

$ cd ~/.config/[chrome, chromium]/Default/File\ System/[three digits]/[lowercase letter]/[two digits] 

    $ cat [eight digits] 
    Lorem Ipsum 

で.shファイルを作成し、それを実行しようとしていません。おそらくpathにディレクトリを置くか、またはファイルを既存のpathのフォルダに移動する必要があります。ファイルには適切なpermissionsを設定してください。 chrome/chromiumブラウザの設定でこれを調整することもできますが、これも試していません。

/path/to/fileのファイルをpathのフォルダにコピーまたは移動するコマンドを記述してファイルを実行することができます。または他のアプローチ。あなたはユーザーファイルシステムにcreateWriterで作成されたファイルのダウンロードを可能にするためにa要素のdownload属性を使用することができます

---

。

The file system is sandboxed

Because the file system is sandboxed, a web app cannot access another app's files. You also cannot read or write files to an arbitrary folder (for example, My Pictures and My Documents) on the user's hard drive.

はDefinititons

persistent storage Persistent storage is storage that stays in the browser unless the user expunges it or the app deletes it.
temporary storage Transient storage is available to any web app. It is automatic and does not need to be requested, but the browser can delete the storage without warning.

---

I want to write file in user directory because it has to be user understandable.

編集、あなたが上記の方法を使用することができます

更新でも参照してください。必要があり、>FileSystem inspectionをチェックlog.txt - >Experiments - それは、フォルダやファイルは、あなたがDevToolsに移動することができクロム/クロムFileSystem内のファイルを表示するには

~/.config/[chrome, chromium]/Default/File System 

    ## do stuff with contents of file written by `window.requestFilesystem` 

---

に表示する方法を検討することで、ファイルマネージャを使用して、ありますResourcesタブのFileSystemにリストされます。

もURL

、一時のルートにあるすべてのファイルとディレクトリを表示する内容

Lorem Ipsum 

または

filesystem:http://run.plnkr.co/temporary/ 

を持っている必要があり

filesystem:http://run.plnkr.co/temporary/log.txt 

を使用してアドレスバーにファイルに移動できますファイルシステム

Exploring the FileSystem API

--allow-file-access-from-filesフラグ付き初回起動クロム/クロムについては、How do I make the Google Chrome flag "--allow-file-access-from-files" permanent?を参照してください。

次

window.requestFileSystem = window.requestFileSystem 
          || window.webkitRequestFileSystem; 

function errorHandler(e) { 
    var msg = ''; 

    switch (e.message) { 
    case FileError.QUOTA_EXCEEDED_ERR: 
     msg = 'QUOTA_EXCEEDED_ERR'; 
     break; 
    case FileError.NOT_FOUND_ERR: 
     msg = 'NOT_FOUND_ERR'; 
     break; 
    case FileError.SECURITY_ERR: 
     msg = 'SECURITY_ERR'; 
     break; 
    case FileError.INVALID_MODIFICATION_ERR: 
     msg = 'INVALID_MODIFICATION_ERR'; 
     break; 
    case FileError.INVALID_STATE_ERR: 
     msg = 'INVALID_STATE_ERR'; 
     break; 
    default: 
     msg = 'Unknown Error'; 
     break; 
    }; 

    console.log('Error: ' + msg); 
} 

エラー処理を追加しますが、その後

function writeFile(fs) { 

    fs.root.getFile('log.txt', {create: true}, function(fileEntry) { 

    // Create a FileWriter object for our FileEntry (log.txt). 
    fileEntry.createWriter(function(fileWriter) { 

     fileWriter.onwriteend = function(e) { 
     console.log('Write completed.'); 
     // call `readFile` here 
     window.requestFileSystem(window.TEMPORARY, 1024*1024, readFile, errorHandler); 

     }; 

     fileWriter.onerror = function(e) { 
     console.log('Write failed: ' + e.toString()); 
     }; 

     // Create a new Blob and write it to log.txt. 
     var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'}); 

     fileWriter.write(blob); 

    }, errorHandler); 

    }, errorHandler); 

} 

window.requestFileSystem(window.TEMPORARY, 1024*1024, writeFile, errorHandler); 

function readFile(fs) { 

    fs.root.getFile('log.txt', {}, function(fileEntry) { 

    // Get a File object representing the file, 
    // then use FileReader to read its contents. 
    fileEntry.file(function(file) { 
     var reader = new FileReader(); 

     reader.onloadend = function(e) { 
     console.log(e.target.result) 
     }; 

     reader.readAsText(file); 
    }, errorHandler); 

    }, errorHandler); 

} 

plnkr http://plnkr.co/edit/EVVNYYUvHiM545T06kMC?p=preview

---

にできるはずです

注Chrome 38+では、​​コンストラクタを使用してFileオブジェクトを作成することもできます。 Chrome: Create file input from blob with Javascript?を参照してください。

このアプローチも、作成したファイルをユーザーファイルシステムの既存のフォルダに自動的に書き込むことはありません。

どちらの方法でも、ファイルをユーザーファイルシステムに保存するためにユーザー操作が必要です。これは、要素のdownload属性、data URIHow to export JavaScript array info to csv (on client side)?、またはiframe要素Download File Using Javascript/jQueryを使用して達成できます。ユーザーはファイルの保存を選択するか、ファイルを保存しないかを選択する必要があります。

---

は、すべてのエラーがスローさ？、The FileSaver interfaceもFileSaver.js