js浏览器使用showOpenFilePicker+showSaveFilePicker打开和编辑保存本地文件代码-html代码-BFW代码库

js浏览器使用showOpenFilePicker+showSaveFilePicker打开和编辑保存本地文件代码

代码语言：html

所属分类：其他

代码描述：js浏览器使用showOpenFilePicker+showSaveFilePicker打开和编辑保存本地文件代码，无需以前的上传下载js代码，采用chrome原生的打开和保存文件api来进行文件编辑保存操作，注意无法在iframe内运行。

代码标签： js浏览器 showOpenFilePicker showSaveFilePicker 打开编辑

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    textarea{
      display: block;
      margin: 10px 0;
      border: 1px solid #444;
      width: 100%;
      height: 500px;
    }
  </style>
</head>

<body>
  <button id="edit" onclick="edit()">打开本地文件进行编辑</button>
  <button id="save" onclick="save()">保存</button>
  <textarea id="content" rows="5"></textarea>
  <script>
    // https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileHandle
    const input = document.querySelector( '#content' )
    let fileName = ''
    async function edit () {
      const pickerOpts = {
        types: [
          {
            description: "txt",
            accept: {
              //https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
              "text/plain": [".txt"], //MIME types
            },
          },
        ],
        excludeAcceptAllOption: true,
        multiple: false,
      };

      try {
        let [ fileHandle ] = await window.showOpenFilePicker(picker.........完整代码请登录后点击上方下载按钮下载查看