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

نحوه باز کردن یک یا چند فایل

Thomas Steiner

کار با فایل‌ها یکی از رایج‌ترین عملیات برای برنامه‌های تحت وب است. به طور سنتی، کاربران نیاز داشتند یک فایل را آپلود کنند، تغییراتی در آن ایجاد کنند و سپس دوباره آن را دانلود کنند که در نتیجه یک کپی در پوشه دانلودها ایجاد می‌شد. با استفاده از API دسترسی به سیستم فایل، کاربران اکنون می‌توانند فایل‌ها را مستقیماً باز کنند، تغییرات را اعمال کنند و تغییرات را در فایل اصلی ذخیره کنند.

روش مدرن

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

برای باز کردن یک فایل، تابع showOpenFilePicker() را فراخوانی کنید، که یک promise با آرایه‌ای از فایل یا فایل‌های انتخاب شده را برمی‌گرداند. اگر به چندین فایل نیاز دارید، می‌توانید { multiple: true, } را به متد ارسال کنید.

Browser Support

Source

روش کلاسیک

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

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

Browser Support

Source

بهبود تدریجی

روش زیر در صورت پشتیبانی از File System Access API از آن استفاده می‌کند و در غیر این صورت به رویکرد کلاسیک برمی‌گردد. در هر دو مورد، تابع آرایه‌ای از فایل‌ها را برمی‌گرداند، اما در مواردی که File System Access API پشتیبانی می‌شود، هر شیء فایل دارای یک FileSystemFileHandle ذخیره شده در ویژگی handle نیز هست، بنابراین می‌توانید به صورت اختیاری handle را روی دیسک serialize کنید.

const openFileOrFiles = async (multiple = false) => {
  // Feature detection. The API needs to be supported
  // and the app not run in an iframe.
  const supportsFileSystemAccess =
    "showOpenFilePicker" in window &&
    (() => {
      try {
        return window.self === window.top;
      } catch {
        return false;
      }
    })();
  // If the File System Access API is supported…
  if (supportsFileSystemAccess) {
    let fileOrFiles = undefined;
    try {
      // Show the file picker, optionally allowing multiple files.
      const handles = await showOpenFilePicker({ multiple });
      // Only one file is requested.
      if (!multiple) {
        // Add the `FileSystemFileHandle` as `.handle`.
        fileOrFiles = await handles[0].getFile();
        fileOrFiles.handle = handles[0];
      } else {
        fileOrFiles = await Promise.all(
          handles.map(async (handle) => {
            const file = await handle.getFile();
            // Add the `FileSystemFileHandle` as `.handle`.
            file.handle = handle;
            return file;
          })
        );
      }
    } catch (err) {
      // Fail silently if the user has simply canceled the dialog.
      if (err.name !== 'AbortError') {
        console.error(err.name, err.message);
      }
    }
    return fileOrFiles;
  }
  // Fallback if the File System Access API is not supported.
  return new Promise((resolve) => {
    // Append a new `<input type="file" multiple? />` and hide it.
    const input = document.createElement('input');
    input.style.display = 'none';
    input.type = 'file';
    document.body.append(input);
    if (multiple) {
      input.multiple = true;
    }
    // The `change` event fires when the user interacts with the dialog.
    input.addEventListener('change', () => {
      // Remove the `<input type="file" multiple? />` again from the DOM.
      input.remove();
      // If no files were selected, return.
      if (!input.files) {
        return;
      }
      // Return all files or just one file.
      resolve(multiple ? Array.from(input.files) : input.files[0]);
    });
    // Show the picker.
    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 one or multiple files</title>
  </head>
  <body>
    <h1>How to open one or multiple files</h1>
    <button type="button">Open file</button>
    <button class="multiple" type="button">Open files</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;
}

button {
  margin: 1rem;
}

جی‌اس


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

const openFileOrFiles = async (multiple = false) => {
  // Feature detection. The API needs to be supported
  // and the app not run in an iframe.
  const supportsFileSystemAccess =
    "showOpenFilePicker" in window &&
    (() => {
      try {
        return window.self === window.top;
      } catch {
        return false;
      }
    })();

  // If the File System Access API is supported…
  if (supportsFileSystemAccess) {
    let fileOrFiles = undefined;
    try {
      // Show the file picker, optionally allowing multiple files.
      fileOrFiles = await showOpenFilePicker({ multiple });
      if (!multiple) {
        // Only one file is requested.
        fileOrFiles = fileOrFiles[0];
      }
    } catch (err) {
      // Fail silently if the user has simply canceled the dialog.
      if (err.name !== 'AbortError') {
        console.error(err.name, err.message);
      }
    }
    return fileOrFiles;
  }
  // Fallback if the File System Access API is not supported.
  return new Promise((resolve) => {
    // Append a new `` and hide it.
    const input = document.createElement('input');
    input.style.display = 'none';
    input.type = 'file';
    document.body.append(input);
    if (multiple) {
      input.multiple = true;
    }
    // The `change` event fires when the user interacts with the dialog.
    input.addEventListener('change', () => {
      // Remove the `` again from the DOM.
      input.remove();
      // If no files were selected, return.
      if (!input.files) {
        return;
      }
      // Return all files or just one file.
      resolve(multiple ? input.files : input.files[0]);
    });
    // Show the picker.
    if ('showPicker' in HTMLInputElement.prototype) {
      input.showPicker();
    } else {
      input.click();
    }
  });
};

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

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

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