如何使用 JavaScript 在浏览器中存储文件

How to store file in a browser using JavaScript

本文关键字：存储文件 浏览器 何使用 JavaScript      更新时间：2023-09-26

我正在为网站的原型工作(仅基于浏览器(。有一部分我需要上传一些文件。在这里，我使用的是JavaScript和HTML。

每当用户想要上传(如应用程序中的浏览按钮(一些文件时，它将在下次可用。我无法做到这一点。

问题我们可以仅在浏览器(不是服务器(中使用JavaScript/HTML保存/存储/上传文件吗？

谢谢

将文件直接下载到用户的文件系统

如果您通过保存/存储意味着直接到用户的计算机/文件系统，那么不，由于安全原因，这是不可能的。

但是，您可以启动下载，这将弹出"另存为"类型的请求者，并允许用户接受或拒绝下载文件。

启动下载的方法不止一种。一个有趣的是锚标记的新download属性，您可以在其中指定文件名以及自动启动下载设置，其href数据 uri 或要引用下载的其他内容：

<a href="urlToFile" download="myFile.ext">Click to download</a>

本地存储机制

如果您只想在本地保存文件，则可以使用许多本地存储机制之一，例如：

  • 文件系统 API(目前仅在 Chrome 和新版 Opera 中受支持。处于草稿状态(
  • 索引数据库(允许 Blob 对象。良好的支持(
  • Web SQL(已弃用但广泛使用(
  • Web存储(非常好的支持，但只存储字符串并且空间有限，对象可以保存为JSON字符串(

请注意，所有这些都是沙盒式的，并且仅在浏览器中使用与写入时相同的来源。数据也可能在任何时候(由用户或浏览器(丢弃，也可能不会被丢弃，因此它们不是"安全"存储(始终保留服务器副本或重新生成数据的方法(。

是的，可以通过文件系统API(目前只有Chrome和Opera(实现。

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
document.querySelector('input[type="file"]').onchange = function(e) {
  var files = this.files;
  window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
    // Duplicate each file the user selected to the app's fs.
    for (var i = 0, file; file = files[i]; ++i) {
      // Capture current iteration's file in local scope for the getFile() callback.
      (function(f) {
        fs.root.getFile(f.name, {create: true, exclusive: true}, function(fileEntry) {
          fileEntry.createWriter(function(fileWriter) {
            fileWriter.write(f); // Note: write() can take a File or Blob object.
          }, errorHandler);
        }, errorHandler);
      })(file);
    }
  }, errorHandler);
};

"我们可以仅在浏览器中(不是服务器(中使用JavaScript/HTML保存/存储/上传文件吗？

答： 是否定的。如果要保留上传的文件，则需要将其存储在服务器上。

浏览器选项卡关闭的那一刻，文件将丢失。

替代方法：您可以做的是将文件名存储在服务器上，每当用户请求文件时，请他上传文件。

要将文件上传到内存中，您可以参考 此链接 .

现场演示

相关文章：