Как веб-приложение получает доступ к локальному файлу?

Я пытаюсь получить доступ к локальным файлам веб-приложения. Веб-IDE, такая как vscode, может напрямую изменять или переименовывать локальные файлы. Хотя vscode, похоже, не использует такой тег, как <input type = "file" />

Я надеюсь загрузить локальный каталог и управлять файлами, такими как удаление/переименование, через мое веб-приложение. Решение веб-IDE может предоставить некоторую ссылку.

Как vscode получает доступ к локальному файлу?

javascript html web-applications file-access

29.01.2023 16:21

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

vscode.dev использует API доступа к файловой системе, который позволяет веб-приложениям напрямую читать и изменять файловую систему.

Вместо использования <input type = "file" /> он вызывает window.showOpenFilePicker() , чтобы получить FileSystemFileHandle , который затем, в свою очередь, может быть прочитан и преобразован в FileSystemWritableFileStream, в который браузер может записывать и сохранять файлы. . Точно так же API может обрабатывать каталоги и просматривать файловую иерархию.

Конечно, это упрощение, так как я не мог подробно рассмотреть API в этом ответе. В статье MDN есть много примеров и подробная документация, которую вам захочется прочитать. Для тестирования следует отметить, что API доступен только на сайтах, обслуживаемых через HTTPS, поэтому вам нужно будет настроить SSL для вашего localhost. Также API доступен не во всех браузерах, поэтому обязательно сверяйтесь с таблицей совместимости.

Согласен с ответом. Следует также иметь в виду, что только около 40% браузеров в настоящее время поддерживают этот API.

— 29.01.2023 16:44

У меня возникла ошибка «Пользователь прервал запрос», когда я пытаюсь переименовать файл с помощью функции file.move(), упомянутой в этом ответе. Флаг chrome://flags/#enable-experimental-web-platform-features может помочь, но не рекомендуется включать флаг вручную. Есть ли другой способ переименовать файл без изменения настроек вручную?

— 31.01.2023 07:18

@cliffyang Я не совсем уверен, в чем проблема, потому что не знаю, что у вас за код. Если у вас все еще есть проблема, я предлагаю опубликовать новый вопрос на Stack Overflow.

— 31.01.2023 15:14

29.01.2023 16:29