Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

एक या एक से ज़्यादा फ़ाइलें खोलने का तरीका

Thomas Steiner

वेब पर मौजूद ऐप्लिकेशन के लिए, फ़ाइलों को मैनेज करना सबसे सामान्य कार्रवाइयों में से एक है. आम तौर पर, उपयोगकर्ताओं को किसी फ़ाइल को अपलोड करना होता है. इसके बाद, उसमें कुछ बदलाव करने होते हैं. इसके बाद, उसे फिर से डाउनलोड करना होता है. इससे, डाउनलोड फ़ोल्डर में फ़ाइल की एक कॉपी बन जाती है. फ़ाइल सिस्टम ऐक्सेस एपीआई की मदद से, अब उपयोगकर्ता सीधे तौर पर फ़ाइलें खोल सकते हैं, उनमें बदलाव कर सकते हैं, और उन बदलावों को ओरिजनल फ़ाइल में वापस सेव कर सकते हैं.

मॉडर्न तरीका

File System Access API के `showOpenFilePicker()` तरीके का इस्तेमाल करना

किसी फ़ाइल को खोलने के लिए, showOpenFilePicker() को कॉल करें. इससे, चुनी गई फ़ाइल या फ़ाइलों के कलेक्शन का प्रॉमिस मिलता है. अगर आपको एक से ज़्यादा फ़ाइलों की ज़रूरत है, तो { multiple: true, } को तरीके के तौर पर पास किया जा सकता है.

Browser Support

Source

क्लासिक तरीका

`<input type="file">` एलिमेंट का इस्तेमाल करना

पेज पर मौजूद <input type="file"> एलिमेंट पर क्लिक करके, एक या एक से ज़्यादा फ़ाइलें खोली जा सकती हैं. अब इस ट्रिक में, JavaScript की मदद से किसी पेज में एलिमेंट को छिपाकर डाला जाता है और प्रोग्राम के हिसाब से उस पर क्लिक किया जाता है.

Browser Support

Source

परतदार वृद्धि

यहां दिया गया तरीका, File System Access API का इस्तेमाल तब करता है, जब यह काम करता है. अगर यह काम नहीं करता है, तो यह पुराने तरीके पर वापस आ जाता है. दोनों ही मामलों में, फ़ंक्शन फ़ाइलों का एक कलेक्शन दिखाता है. हालांकि, जहां File System Access API काम करता है वहां हर फ़ाइल ऑब्जेक्ट में FileSystemFileHandle प्रॉपर्टी में सेव किया गया handle भी होता है. इसलिए, आपके पास हैंडल को डिस्क में क्रम से लगाने का विकल्प होता है.

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

इस बारे में और पढ़ें

File System Access 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;
}

JS


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