Как открыть один или несколько файлов

Работа с файлами — одна из наиболее распространенных операций для приложений в Интернете. Традиционно пользователям приходилось загружать файл, вносить в него некоторые изменения, а затем загружать его снова, в результате чего копия оказывалась в папке «Загрузки». С помощью API доступа к файловой системе пользователи теперь могут напрямую открывать файлы, вносить изменения и сохранять изменения в исходном файле.

Чтобы открыть файл, вызовите showOpenFilePicker() , который возвращает обещание с массивом выбранного файла или файлов. Если вам нужно несколько файлов, вы можете передать методу { multiple: true, } .

Поддержка браузера

  • 86
  • 86
  • Икс
  • Икс

Источник

Классический способ

Использование элемента <input type="file">

Элемент <input type="file"> на странице позволяет пользователю щелкнуть его и открыть один или несколько файлов. Хитрость теперь состоит в том, чтобы незаметно вставить элемент на страницу с помощью JavaScript и программно щелкнуть по нему.

Поддержка браузера

  • 1
  • 12
  • 1
  • 1

Источник

Прогрессивное улучшение

Приведенный ниже метод использует API доступа к файловой системе, если он поддерживается, а в противном случае возвращается к классическому подходу. В обоих случаях функция возвращает массив файлов, но в случае поддержки 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();
   
}
 
});
};

дальнейшее чтение

Демо

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