این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

نحوه باز کردن دایرکتوری

Thomas Steiner

سروکار داشتن با دایرکتوری‌ها چیزی نیست که روزانه با آن سر و کار داشته باشید، اما گاهی اوقات این مورد پیش می‌آید، مانند زمانی که می‌خواهید تمام تصاویر موجود در یک دایرکتوری را پردازش کنید. با استفاده از رابط برنامه‌نویسی کاربردی دسترسی به سیستم فایل (File System Access API)، کاربران اکنون می‌توانند دایرکتوری‌ها را در مرورگر باز کنند و تصمیم بگیرند که آیا به دسترسی نوشتن نیاز دارند یا خیر.

روش مدرن

استفاده از متد `showDirectoryPicker()` در رابط برنامه‌نویسی کاربردی دسترسی به سیستم فایل

برای باز کردن یک دایرکتوری، تابع showDirectoryPicker() را فراخوانی کنید، که یک promise با دایرکتوری انتخاب شده را برمی‌گرداند. اگر به دسترسی نوشتن نیاز دارید، می‌توانید { mode: 'readwrite' } را به متد ارسال کنید.

Browser Support

Source

روش کلاسیک

استفاده از عنصر `<input type="file" webkitdirectory>`

عنصر <input type="file" webkitdirectory> در یک صفحه به کاربر اجازه می‌دهد تا روی آن کلیک کرده و یک دایرکتوری را باز کند. اکنون ترفند شامل قرار دادن عنصر به صورت نامرئی در یک صفحه با جاوا اسکریپت و کلیک بر روی آن به صورت برنامه‌نویسی شده است.

Browser Support

Source

بهبود تدریجی

روش زیر در صورت پشتیبانی از File System Access API از آن استفاده می‌کند و در غیر این صورت به رویکرد کلاسیک برمی‌گردد. در هر دو مورد، تابع یک دایرکتوری را برمی‌گرداند، اما در مواردی که 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();
    }
  });
};

مطالعه بیشتر

API دسترسی به سیستم فایل

نسخه آزمایشی

اچ‌تی‌ام‌ال

<!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>

سی‌اس‌اس


        :root {
  color-scheme: dark light;
}

html {
  box-sizing: border-box;
}

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

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

جی‌اس


        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`));
});

نحوه باز کردن دایرکتوری با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.