A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/zh-CN/docs/Web/API/FileSystemFileHandle/createWritable below:

FileSystemFileHandle：createWritable() 方法 - Web API

我们的 createWritable() 模式测试示例提供了一个 <button> 来选择要写入的文件，一个文本 <input> 字段，你可以在其中输入一些要写入文件的文本，以及第二个 <button> 来将文本写入文件。

在上面的演示中，尝试选择文件系统上的文本文件（或输入新文件名），在输入字段中输入一些文本，然后将文本写入文件。打开文件系统上的文件以检查写入是否成功。

此外，尝试同时在两个浏览器标签页中打开页面。在第一个标签页中选择要写入的文件，然后立即尝试在第二个标签页中选择要写入的同一文件。你应该会收到一条错误消息，因为我们在 createWritable() 调用中设置了 mode: "exclusive"。

下面我们将探索代码。

HTML

两个 <button> 元素和文本 <input> 字段如下所示：

<ol>
  <li>选择要写入的文件：<button class="select">选择文件</button></li>
  <li>
    <label for="file-text">输入要写入文件的文本：</label>
    <input type="text" id="file-text" name="file-text" disabled />
  </li>
  <li>将你的文本写入文件：<button class="write" disabled>写入文本</button></li>
</ol>

文本输入字段和写入文本按钮最初通过 disabled 属性设置为禁用——直到用户选择要写入的文件时，它们才应被使用。

li {
  margin-bottom: 10px;
}
JavaScript

我们首先获取对选择文件按钮、写入文本按钮和文本输入字段的引用。我们还声明一个全局变量 writableStream，它将存储对可写流的引用，用于在创建后将文本写入文件。我们最初将其设置为 null。

const selectBtn = document.querySelector(".select");
const writeBtn = document.querySelector(".write");
const fileText = document.querySelector("#file-text");

let writableStream = null;

接下来，我们创建一个名为 selectFile() 的异步函数，当按下选择按钮时，我们将调用该函数。它使用 Window.showSaveFilePicker() 方法向用户显示文件选择器对话框，并为他们选择的文件创建文件句柄。在该句柄上，我们调用 createWritable() 方法来创建一个流，以将文本写入所选文件。如果调用失败，我们会将错误记录到控制台。

我们向 createWritable() 传递一个包含以下选项的选项对象：

最后，我们启用输入字段和写文本按钮，因为它们是下一步所需要的，并禁用选择文件按钮（目前不需要）。

async function selectFile() {
  // 创建新句柄
  const handle = await window.showSaveFilePicker();

  // 创建 FileSystemWritableFileStream 来写入
  try {
    writableStream = await handle.createWritable({
      keepExistingData: true,
      mode: "exclusive",
    });
  } catch (e) {
    if (e.name === "NoModificationAllowedError") {
      console.log(`你现在无法访问该文件；其他人正在尝试修改它。请稍后重试。`);
    } else {
      console.log(e.message);
    }
  }

  // 启用文本字段和写入按钮，禁用选择按钮
  fileText.disabled = false;
  writeBtn.disabled = false;
  selectBtn.disabled = true;
}

我们的下一个函数 writeFile() 使用 FileSystemWritableFileStream.write() 将输入字段中输入的文本写入所选文件，然后清空输入字段。然后我们使用 WritableStream.close() 关闭可写流，并重置演示以便再次运行——控件的 disable 状态切换回其原始状态，并且 writableStream 变量设置回 null。

async function writeFile() {
  // 将文本写入我们的文件并清空文本字段
  await writableStream.write(fileText.value);
  fileText.value = "";

  // 关闭文件并将内容写入磁盘。
  await writableStream.close();

  // 禁用文本字段和写入按钮，启用选择按钮
  fileText.disabled = true;
  writeBtn.disabled = true;
  selectBtn.disabled = false;

  // 将 writeableStream 重新设置为 null
  writableStream = null;
}

为了使演示运行，我们在按钮上设置了事件监听器，以便在每个按钮被点击时运行相关的函数。

selectBtn.addEventListener("click", selectFile);
writeBtn.addEventListener("click", writeFile);

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4