如何使用JavaScript寫入文件（用戶目錄）？

Question

我想使用html5和javascript或jquery從chrome（所有版本）寫入任何文件的txt。

我嘗試過FileSystem 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

我想在用戶目錄中寫入文件

您無法直接將文件寫入用戶文件系統。

在搜索SO以尋找類似的問題以准確解決問題之后，能夠在@Iain發布的這個答案之后在plnkr創建的文件的$ cat內容在哪里PERSISTENT文件系統存儲存儲與chrome？ 。 該文件已寫入~/.config/[chrome, chromium]目錄下的用戶文件系統。

使用的文件管理器導航到

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

查看目錄; 包含下面文字的文件，在兩個數字作為文件夾名稱的文件夾中找到，然后在另外兩個子目錄中找到; 具有單個小寫字母作為文件夾名稱的子目錄; 在這個子目錄中，有另一個子目錄，有兩個數字作為文件夾名稱; window.webkitRequestFileSystem編寫的文件有八個數字作為文件名，沒有擴展名，但具有正確的"text/plain" MIME類型; 設置為Blob type屬性。

然后在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 ，並執行該文件; 或其他方法。

---

您可以使用download的屬性， a元素，以允許創建文件的下載createWriter用戶的文件系統。

文件系統是沙箱

由於文件系統是沙盒，因此Web應用程序無法訪問其他應用程序的文件。 您也無法將文件讀取或寫入用戶硬盤上的任意文件夾（例如，“我的圖片”和“我的文檔”）。

也見於Definititons

持久存儲持久存儲是指保留在瀏覽器中的存儲，除非用戶將其刪除或應用程序將其刪除。
臨時存儲瞬態存儲可用於任何Web應用程序。 它是自動的，不需要請求，但瀏覽器可以在沒有警告的情況下刪除存儲。

---

我想在用戶目錄中寫入文件，因為它必須是用戶可以理解的。

編輯，更新

您可以使用上述方法。 也就是說，使用文件管理器來查看文件夾和文件的顯示方式

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

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

---

要查看chrome / chromium FileSystem文件，您可以導航到DevTools - > Experiments - >檢查FileSystem inspection ， log.txt應該在FileSystem Resources選項卡中列出。

也可以使用URL導航到地址欄中的文件

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

哪個應該有內容

Lorem Ipsum

要么

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

查看臨時文件系統根目錄下的所有文件和目錄

請參閱探索FileSystem API

首先使用--allow-file-access-from-files標志啟動chrome / chromium，請參閱如何使Google Chrome標記“--allow-file-access-from-files”永久保留？ 。

下一個

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+上，還可以使用new File()構造函數創建File對象; 看Chrome：使用Javascript從blob創建文件輸入？ 。

不，它是后台進程，將數據保存到文件夾中存在的文件中。

此方法也不會自動將創建的文件寫入用戶文件系統的現有文件夾。

無論采用哪種方法，都需要用戶操作將文件保存到用戶文件系統。 這可以通過使用可實現download屬性的a元素， data URI 如何JavaScript數組信息導出為CSV格式（在客戶端）？ 或iframe元素使用Javascript / jQuery下載文件 ; 這應該提示用戶選擇保存文件或不保存文件。

---

另請參見FileSaver界面 FileSaver.js