如何使用 JavaScript 在瀏覽器中存儲文件

Question

我正在為網站原型工作（僅基於瀏覽器）。 有一部分我需要上傳一些文件。這里我使用的是 JavaScript 和 HTML。

每當用戶想要上傳（如應用程序中的瀏覽按鈕）一些文件時，它就會在下次可用。我無法做到這一點。

問題我們可以僅在瀏覽器（不是服務器）中使用 JavaScript/HTML 保存/存儲/上傳文件嗎？？

謝謝

Answer 1

將文件直接下載到用戶的文件系統

如果您通過保存/存儲意味着直接到用戶的計算機/文件系統，那么不，由於安全原因，這是不可能的。

但是，您可以啟動下載，這將彈出“另存為”類型的請求者並允許用戶接受或拒絕下載文件。

啟動下載的方法不止一種。 一個有趣的是錨標記的新download屬性，您可以在其中指定文件名並自動啟動下載，將其href設置為data-uri或其他您想要引用的下載內容：

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

本地存儲機制

如果您只是想在本地保存文件，您可以使用多種本地存儲機制之一，例如：

• 文件系統 API （目前僅支持Chrome 和新的 Opera 。處於草稿狀態）
• 索引數據庫（允許 Blob 對象。良好的支持）
• Web SQL （已棄用但廣泛使用）
• Web Storage （很好的支持但是只存儲字符串，空間有限，對象可以保存為JSON字符串）

請注意，所有這些都被沙盒化，並且只能在使用與編寫它們相同的來源的瀏覽器中使用。 數據也可能會或可能不會在任何時候（由用戶或瀏覽器）丟棄，因此它們不是“安全”存儲（始終保留服務器副本或重新生成數據的方法）。

Answer 2

是的，可以通過FileSystem 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);

};

Answer 3

“我們可以僅在瀏覽器（不是服務器）中使用 JavaScript/HTML 保存/存儲/上傳文件嗎？”

答。 是否。 如果要保留上傳的文件，則需要將其存儲在服務器上。

瀏覽器選項卡關閉時，文件將丟失。

替代方案：您可以做的是將文件的名稱存儲在服務器上，每當用戶請求該文件時，請他上傳它。

要將文件上傳到內存中，您可以參考此鏈接。

現場演示