How to use js open a specific folder in the browser All In One

How to use js open a specific folder in the browser All In One

Window showDirectoryPicker 打开系统指定的枚举值的目录文件夹，选取其中包含的一个文件夹

demos

// open-a-specific-folder.js


document.addEventListener("DOMContentLoaded", (event) => {
  console.log("DOM fully loaded and parsed ✅");
  const btnDesktop = document.querySelector(`#btn_desktop`);
  const btnDownload = document.querySelector(`#btn_download`);
  const btnDocument = document.querySelector(`#btn_document`);
  //
  btnDesktop.addEventListener(`click`, async (e) => {
    try {
      const dirHandle = await window.showDirectoryPicker({
        id: 'desktop-picker',
        mode: "readwrite",
        startIn: 'desktop',
        // ✅
      });
      console.log(`dirHandle =`, dirHandle);
      for await (const [name, handle] of dirHandle) {
        console.log(`${name} - ${handle.kind}`);
      }
    } catch (err) {
      console.error(`❌ Error selecting directory:`, err);
    }
  });
  btnDownload.addEventListener(`click`, async (e) => {
    try {
      const dirHandle = await window.showDirectoryPicker({
        id: 'download-picker',
        mode: "readwrite",
        startIn: 'downloads',
        // ✅
      });
      console.log(`dirHandle =`, dirHandle);
      for await (const [name, handle] of dirHandle) {
        console.log(`${name} - ${handle.kind}`);
      }
    } catch (err) {
      console.error(`❌ Error selecting directory:`, err);
    }
  });
  btnDocument.addEventListener(`click`, async (e) => {
    try {
      const dirHandle = await window.showDirectoryPicker({
        id: 'document-picker',
        mode: "readwrite",
        // startIn: 'documents',
        // ✅
        // startIn: 'music',
        // ✅
        // startIn: 'pictures',
        // ✅
        startIn: 'videos',
        // ✅ in macOS videos === movies ⚠️
        // startIn: 'movies',
        // ❌
        // startIn: 'documents/github',
        // installHook.js:1 ❌ Error selecting directory: TypeError: Failed to execute 'showDirectoryPicker' on 'Window': Failed to read the 'startIn' property from 'DirectoryPickerOptions': The provided value 'documents/github' is not a valid enum value of type WellKnownDirectory.
        // startIn: 'applications',
        // ❌
        // startIn: 'airdrop',
        // ❌
        // startIn: 'library',
        // ❌
        // startIn: 'share',
        // ❌
      });
      console.log(`dirHandle =`, dirHandle);
      for await (const [name, handle] of dirHandle) {
        console.log(`${name} - ${handle.kind}`);
      }
    } catch (err) {
      console.error(`❌ Error selecting directory:`, err);
    }
  });
});


/*

https://developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker

startIn Optional
A FileSystemHandle or a well known directory ("desktop", "documents", "downloads", "music", "pictures", or "videos") to open the dialog in.


*/

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

https://developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---