如何使用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

我想在用户目录中写入文件

您不能直接将文件写入用户文件系统。

在搜索类似问题以准确解决问题后，能够按照 @Iain 在Where does PERSISTENT file system storage store with chrome?发布的答案$ cat，在plnkr 创建的文件内容。。该文件已写入用户文件系统的目录。~/.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 应用程序无法访问其他应用程序的文件。您也无法在用户硬盘驱动器上的任意文件夹（例如“我的图片”和“我的文档”）中读取或写入文件。

另请参阅定义

持久存储持久存储是保留在浏览器中的存储，除非用户删除它或应用程序删除它。
临时存储任何 Web 应用程序都可以使用临时存储。它是自动的，不需要请求，但浏览器可以在没有警告的情况下删除存储。

我想在用户目录中写入文件，因为它必须是用户可以理解的。

编辑、更新

您可以使用上面介绍的方法。也就是说，使用文件管理器查看文件夹和文件在中的显示方式

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

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

要在 chrome/chromium 中查看文件，FileSystem您可以导航至DevTools-> Experiments-> check FileSystem inspection，log.txt应在Resources选项卡中列出FileSystem。

还可以使用 URL 在地址栏导航到文件

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

其中应该有内容

Lorem Ipsum

或者

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

查看临时文件系统根目录中的所有文件和目录

请参阅探索文件系统 API

首先使用--allow-file-access-from-filesflag 启动 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+ 中，还可以File使用new File()构造函数创建对象；请参阅Chrome：使用 Javascript 从 blob 创建文件输入？。

不，它是后台进程，将数据保存到文件夹中存在的文件中。

这种方法也不会自动将创建的文件写入用户文件系统的现有文件夹中。

无论采用哪种方法，都应该要求用户采取行动将文件保存到用户文件系统。这可以使用elementdownload的属性来实现，如何将 JavaScript 数组信息导出到 csv（在客户端）？，或元素 “使用 Javascript/jQuery 下载文件”；这应该提示用户选择保存文件或不保存文件。adata URI iframe

另请参阅FileSaver 接口、FileSaver.js