วิธีเปิดไดเรกทอรี

การจัดการไดเรกทอรีไม่ใช่สิ่งที่คุณต้องรับมือในแต่ละวัน แต่บางครั้งก็เกิดกรณีใช้งานขึ้น เช่น ต้องการประมวลผลรูปภาพทั้งหมดในไดเรกทอรี เมื่อใช้ File System Access API ผู้ใช้จะเปิดไดเรกทอรีในเบราว์เซอร์และตัดสินใจได้ว่าต้องมีสิทธิ์เข้าถึงการเขียนหรือไม่

วิธีสมัยใหม่

การใช้เมธอด showDirectoryPicker() ของ File System Access API

หากต้องการเปิดไดเรกทอรี ให้เรียกใช้ showDirectoryPicker() ซึ่งจะแสดงผลคำสัญญาพร้อมกับไดเรกทอรีที่เลือก หากต้องการสิทธิ์การเขียน คุณสามารถส่ง { mode: 'readwrite' } ไปยังเมธอดได้

การสนับสนุนเบราว์เซอร์

  • 86
  • 86
  • x
  • x

แหล่งที่มา

วิธีคลาสสิก

การใช้องค์ประกอบ <input type="file" webkitdirectory>

องค์ประกอบ <input type="file" webkitdirectory> ในหน้าเว็บช่วยให้ผู้ใช้คลิกและเปิดไดเรกทอรีได้ กลวิธีตอนนี้ประกอบด้วยการแทรกองค์ประกอบอย่างไม่แสดงในหน้าเว็บด้วย JavaScript และคลิกแบบเป็นโปรแกรม

การสนับสนุนเบราว์เซอร์

  • 7
  • 13
  • 50
  • 11.1

แหล่งที่มา

การเพิ่มประสิทธิภาพแบบต่อเนื่อง

วิธีการด้านล่างใช้ File System Access API เมื่อมีการรองรับและเมื่อเปลี่ยนมาใช้วิธีคลาสสิกแล้ว ในทั้ง 2 กรณี ฟังก์ชันจะแสดงผลไดเรกทอรี แต่ในกรณีที่มีการรองรับ File System Access API ออบเจ็กต์ไฟล์แต่ละรายการจะมี FileSystemDirectoryHandle จัดเก็บไว้ในพร็อพเพอร์ตี้ directoryHandle และ FileSystemFileHandle ที่จัดเก็บไว้ในพร็อพเพอร์ตี้ handle อยู่ เพื่อให้คุณสามารถเลือกอนุกรมของแฮนเดิลลงในดิสก์ได้

const openDirectory = async (mode = "read") => {
  // Feature detection. The API needs to be supported
  // and the app not run in an iframe.
  const supportsFileSystemAccess =
    "showDirectoryPicker" in window &&
    (() => {
      try {
        return window.self === window.top;
      } catch {
        return false;
      }
    })();
  // If the File System Access API is supported…
  if (supportsFileSystemAccess) {
    let directoryStructure = undefined;

    // Recursive function that walks the directory structure.
    const getFiles = async (dirHandle, path = dirHandle.name) => {
      const dirs = [];
      const files = [];
      for await (const entry of dirHandle.values()) {
        const nestedPath = `${path}/${entry.name}`;
        if (entry.kind === "file") {
          files.push(
            entry.getFile().then((file) => {
              file.directoryHandle = dirHandle;
              file.handle = entry;
              return Object.defineProperty(file, "webkitRelativePath", {
                configurable: true,
                enumerable: true,
                get: () => nestedPath,
              });
            })
          );
        } else if (entry.kind === "directory") {
          dirs.push(getFiles(entry, nestedPath));
        }
      }
      return [
        ...(await Promise.all(dirs)).flat(),
        ...(await Promise.all(files)),
      ];
    };

    try {
      // Open the directory.
      const handle = await showDirectoryPicker({
        mode,
      });
      // Get the directory structure.
      directoryStructure = getFiles(handle, undefined);
    } catch (err) {
      if (err.name !== "AbortError") {
        console.error(err.name, err.message);
      }
    }
    return directoryStructure;
  }
  // Fallback if the File System Access API is not supported.
  return new Promise((resolve) => {
    const input = document.createElement('input');
    input.type = 'file';
    input.webkitdirectory = true;

    input.addEventListener('change', () => {
      let files = Array.from(input.files);
      resolve(files);
    });
    if ('showPicker' in HTMLInputElement.prototype) {
      input.showPicker();
    } else {
      input.click();
    }
  });
};

อ่านเพิ่มเติม

เดโม

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📂</text></svg>"
    />
    <title>How to open a directory</title>
  </head>
  <body>
    <h1>How to open a directory</h1>
    <button type="button">Open directory</button>
    <pre></pre>
  </body>
</html>

CSS


        :root {
  color-scheme: dark light;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}
        

JS


        const button = document.querySelector('button');
const pre = document.querySelector('pre');

const openDirectory = async (mode = "read") => {
  // Feature detection. The API needs to be supported
  // and the app not run in an iframe.
  const supportsFileSystemAccess =
    "showDirectoryPicker" in window &&
    (() => {
      try {
        return window.self === window.top;
      } catch {
        return false;
      }
    })();
  // If the File System Access API is supported…
  if (supportsFileSystemAccess) {
    let directoryStructure = undefined;

    const getFiles = async (dirHandle, path = dirHandle.name) => {
      const dirs = [];
      const files = [];
      for await (const entry of dirHandle.values()) {
        const nestedPath = `${path}/${entry.name}`;
        if (entry.kind === "file") {
          files.push(
            entry.getFile().then((file) => {
              file.directoryHandle = dirHandle;
              file.handle = entry;
              return Object.defineProperty(file, "webkitRelativePath", {
                configurable: true,
                enumerable: true,
                get: () => nestedPath,
              });
            })
          );
        } else if (entry.kind === "directory") {
          dirs.push(getFiles(entry, nestedPath));
        }
      }
      return [
        ...(await Promise.all(dirs)).flat(),
        ...(await Promise.all(files)),
      ];
    };

    try {
      const handle = await showDirectoryPicker({
        mode,
      });
      directoryStructure = getFiles(handle, undefined);
    } catch (err) {
      if (err.name !== "AbortError") {
        console.error(err.name, err.message);
      }
    }
    return directoryStructure;
  }
  // Fallback if the File System Access API is not supported.
  return new Promise((resolve) => {
    const input = document.createElement('input');
    input.type = 'file';
    input.webkitdirectory = true;

    input.addEventListener('change', () => {
      let files = Array.from(input.files);
      resolve(files);
    });
    if ('showPicker' in HTMLInputElement.prototype) {
      input.showPicker();
    } else {
      input.click();
    }
  });
};

button.addEventListener('click', async () => {
  const filesInDirectory = await openDirectory();
  if (!filesInDirectory) {
    return;
  }
  Array.from(filesInDirectory).forEach((file) => (pre.textContent += `${file.name}\n`));
});