Укажите каталог для загружаемых файлов

Обновлено: 06.07.2024

Эта спецификация позволяет загружать каталоги, позволяя разработчику асинхронно читать содержимое каталогов (файлы и подкаталоги) и иметь возможность идентифицировать структуру каталогов. В этой спецификации предлагаются изменения в [[!HTML]] (в частности, дополнительная поверхность API для HTMLInputElement вместе с дополнительным атрибутом элемента), а также новая спецификация под названием Directory Upload, которая добавляет каталоги в сети.

Эта спецификация в настоящее время предлагается в рамках WICG (группы сообщества веб-инкубатора) с ожиданием того, что могут быть изменения, и что аспекты этого предложения в конечном итоге станут частью [[!HTML]] и [[!FileAPI ]] стандарты.

Введение

Фон

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

Сценарии

Эта спецификация охватывает следующие сценарии:

  1. Пользователи могут выбрать один или несколько каталогов с помощью файлового диалога.
  2. Пользователи могут выбирать комбинацию каталогов и файлов с помощью диалогового окна файлов.
  3. Пользователи могут выбирать один или несколько каталогов с помощью перетаскивания.
  4. Пользователи могут выбирать комбинацию каталогов и файлов с помощью перетаскивания.

Для сценариев 1 и 2 входному тегу HTML5 нужен новый атрибут, который позволит пользователю выбирать каталог, а также файлы. Кроме того, для HTMLInputElement требуется метод для извлечения всех выбранных файлов и каталогов, чтобы их можно было просмотреть. Для сценариев 3 и 4 DataTransfer нужен метод для извлечения всех вставленных файлов и каталогов, чтобы их можно было просмотреть. Чтобы включить эти сценарии, необходимо определить интерфейс каталога, позволяющий выполнять следующие действия: извлекать список его содержимого, сообщать его относительный путь и сообщать его имя.

Модель

Каталог, файл, корень и путь

В этой спецификации a – это логическая организующая единица хранения, которая содержит файлы и/или одну или несколько единиц (которые сами являются каталогами). Каталог соответствует той же концепции базовой файловой системы ОС, которая также называется папкой в некоторых базовых файловых системах ОС. A — это стабильные двоичные данные, полученные из базовой файловой системы ОС, и веб-приложения могут программно манипулировать ими, как определено в [[!FileAPI]]. В этой спецификации файлы и каталоги, выбранные пользователем, представлены временным деревом каталогов. Файлы и каталоги, выбранные пользователем, имеют положение во временном дереве каталогов, которое может быть представлено строкой, называемой файлом . В строке пути используется символ SOLIDUS U+002F ("/") для обозначения иерархии каталогов во временном дереве каталогов. Файлы, как и каталоги, имеют разные имена и пути, которые идентифицируют их во временном дереве каталогов.

Самый верхний каталог, содержащий все каталоги и файлы, если они существуют, называется каталогом и имеет следующие свойства:

Он не содержится ни в одном другом каталоге временного дерева каталогов; он содержит все остальные. Это корень временного дерева каталогов.

Он представлен путем, равным одному "/" U+002F SOLIDUS.

Каталог, из которого пользователь выбирает файлы и подкаталоги, считается непосредственным дочерним элементом корня дерева временных каталогов и имеет путь, равный одному "/" U+ 002F SOLIDUS объединяется со своим именем.

Временное дерево каталогов

В этой спецификации a состоит из каталогов и файлов, а также связанного пути от корня для каждого каталога и файла, которые пользователь выбрал из базовой файловой системы ОС; каждый такой каталог или файл должен соответствовать узлу во временном дереве каталогов, при этом самым верхним каталогом является каталог, из которого пользователь выбрал файлы и каталоги, и непосредственный дочерний элемент корневого каталога. временного дерева каталогов.

Это узел временного дерева каталогов, представляющий текущий каталог, из которого выполняется операция.

Путь к данному каталогу или файлу из корневого каталога называется a и начинается с ведущего символа "/" U+002F SOLIDUS и заканчивается именем файла или каталога.

A — это узел временного дерева каталогов с позицией, которая находится ниже заданной позиции во временном дереве каталогов для данного каталога; подкаталог текущего рабочего каталога является дочерним по отношению к текущему рабочему каталогу; подкаталог этого подкаталога также является дочерним по отношению к текущему рабочему каталогу. Соответствует узлу временного дерева каталогов, который является либо подкаталогом, следующим по пути, либо файлом, следующим по пути. A — это каталог, содержащий файл или другой каталог; в частности, каталог, содержащий текущий рабочий каталог, является его родителем. Корневой каталог является родительским для всех остальных узлов временного дерева каталогов.

В данной спецификации под информацией понимается любое из следующего:

Информация о метках времени, например информация о последних изменениях файлов, доступная через свойство lastModified объектов File [[!FileAPI]].

Информация о размере файлов, доступная через свойство size объектов File [[!FileAPI]].

Информация о типах файлов, предоставляемая через свойство type объектов File [[!FileAPI]].

Информация об именах и путях файлов и каталогов, доступная через свойства имени и пути объектов File и Directory.

Когда эта спецификация указывает n на последовательность s из дерева временных каталогов, это означает добавление ссылки на n в s вместе с любой статистической информацией.

Возврат файлов и каталогов

Когда эта спецификация указывает на заданный текущий рабочий каталог, пользовательский агент должен выполнить следующие шаги:

Если результатом выполнения является объект настроек, безопасный контекст с действующим объектом настроек имеет значение Not Secure , вернуть новое обещание, отклоненное с исключением "SecurityError".

Пусть p будет новым обещанием, а s - последовательностью, изначально заданной как пустая последовательность.

Выполните следующие шаги асинхронно:

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

В противном случае для каждого непосредственного дочернего элемента текущего рабочего каталога добавьте узел в s как объект File или Directory, в зависимости от типа непосредственного дочернего элемента.

Если есть какие-либо проблемы с получением любого непосредственного дочернего элемента, отклоните p с InvalidStateError .

Обещание отклонено при любой проблеме со сканированием текущего рабочего каталога.

После того, как все непосредственные дочерние узлы текущего рабочего каталога будут добавлены в s как файл или каталог, разрешите p с помощью s .

Общий метод getFilesAndDirectories() как для HTMLInputElement, так и для интерфейса Directory возвращает файлы и подкаталоги для заданного каталога, используя шаги, описанные выше. Каждый метод, вызывающий описанные выше шаги, должен указать, что считать текущим рабочим каталогом.

Возврат свернутого списка файлов

Часто бывает удобно просто вернуть плоский список файлов из временного дерева каталогов. Они могут быть только из текущего рабочего каталога, то есть только из каждого непосредственного дочернего элемента текущего рабочего каталога, который является файлом, или из всего дерева, включая подкаталоги. Это можно настроить с помощью параметра , для которого можно установить значение true ; если истинные пользовательские агенты должны пройти через все временное дерево каталогов и вернуть все файлы.

Когда эта спецификация указывает на заданный текущий рабочий каталог, пользовательский агент должен выполнить следующие шаги:

Если результатом выполнения является объект настроек, безопасный контекст с действующим объектом настроек имеет значение Not Secure , вернуть новое обещание, отклоненное с исключением "SecurityError".

Пусть p будет новым обещанием, а s - последовательностью, изначально заданной как пустая последовательность.

Выполните следующие шаги асинхронно:

Если для рекурсивного флага установлено значение true , выполните следующие подшаги:

Для каждого непосредственного дочернего элемента текущего рабочего каталога, который также является файлом, добавьте узел в s как объект File, представляющий этот файл.

Пройтись по всем дочерним узлам, которые являются подкаталогами текущего рабочего каталога. Если какой-либо из них содержит файлы, добавьте узел в s как объект File, представляющий этот файл.

Если есть проблемы с получением любого файла или добавлением узла для этого файла, отклоните p с InvalidStateError .

В противном случае для флага рекурсии устанавливается значение false . Для каждого непосредственного дочернего элемента текущего рабочего каталога, который является файлом, добавьте узел в s как объект File, представляющий этот файл. Если есть проблемы с получением какого-либо файла или добавлением узла для этого файла, отклоните p с InvalidStateError .

Разрешить p с s .

Если файлы не найдены, p по-прежнему разрешается с помощью s, которая по-прежнему является пустой последовательностью.

Запуск средства выбора каталога

В конечном итоге этот раздел станет запросом на включение спецификации HTML.

Когда атрибут type элемента ввода находится в состоянии загрузки файла, применяются правила этого раздела [[!HTML]]. .

Агенты пользователя могут отображать средство выбора каталога, которое также может служить средством выбора файлов; это неопределенная часть пользовательского интерфейса, которую пользовательский агент может развернуть при получении события щелчка, и может расширять любой существующий пользовательский интерфейс, уже существующий для выбора файлов, когда атрибут type элемента ввода находится в состоянии File Upload. Обычно это происходит синхронно и считается блокирующей операцией. Когда эта спецификация говорит, что пользовательский агент должен выполнить следующие шаги (и, возможно, выполнить шаги, помеченные как «может» [[!RFC2119]]):

Если алгоритм не [[!HTML]], прервите эти шаги, ничего больше не делая.

Вернуться, но продолжить выполнение этих шагов [[!HTML]].

При желании подождите, пока не завершится любое предыдущее выполнение этого алгоритма.

Если в результате запуска объекта настроек защищенный контекст с действующим объектом настроек имеет значение Not Secure , пользовательский агент может вообще запретить отображение средства выбора каталога. В этом случае пользовательский агент может выполнить шаги для состояния загрузки файла, как если бы атрибут allowdirs не был установлен, и выйти из этого алгоритма.

Если пользовательский агент может отображать как средство выбора каталога, так и средство выбора файлов в одном элементе пользовательского интерфейса, говорят, что этот пользовательский агент имеет расширение . Для атрибута HTMLInputElement.isFilesAndDirectoriesSupported элемента HTMLInputElement должно быть установлено значение true .

На практике пользовательские агенты могут повторно использовать элементы пользовательского интерфейса из основной ОС. Если ОС хоста поддерживает средство выбора одного файла и каталога, ввод файла с помощью одной кнопки, которая включает комбинированное средство выбора, может отображаться и может напоминать предлагаемый элемент пользовательского интерфейса ниже:

В настоящее время единый инструмент выбора доступен только в OSX.

Если пользовательский агент не имеет средства выбора одного файла и каталога, говорят, что он имеет . Этот пользовательский агент должен предоставить значение false для атрибута HTMLInputElement.isFilesAndDirectoriesSupported элемента HTMLInputElement.

Если пользовательский агент имеет отдельные средства выбора файлов и каталогов, возможно повторное использование элементов пользовательского интерфейса из хост-ОС, ввод файла, который включает два отдельных средства выбора (файл и каталог) с помощью двух разных кнопок, может отображаться и может напоминать предлагаемого пользователя. элемент интерфейса ниже:

Если пользовательский агент имеет отдельные средства выбора файлов и каталогов и настроен на запуск в режиме, он может отображать только средство выбора, которое позволяет выбирать каталог, или может отображать средство выбора с двумя отдельными кнопками, как на рис. 2 выше. Предлагаемый ниже элемент пользовательского интерфейса можно использовать для отображения опции выбора только каталогов:

Подождите, пока пользователь сделает свой выбор.

[[!HTML]], чтобы сначала обновить выбранные файлы и каталоги элемента, чтобы он представлял выбор пользователя как временное дерево каталогов, затем запустить простое событие, которое выводит всплывающее окно с именем input в элементе ввода, и, наконец, запустить простое событие событие, которое всплывает с именем change в элементе ввода.

Атрибуты

В конечном итоге этот раздел станет запросом на включение спецификации HTML.

Когда атрибут type элемента ввода находится в состоянии, применяются правила этого раздела [[!HTML]].

Если атрибут содержимого allowdirs НЕ установлен, он представляет собой список только выбранных файлов, каждый файл состоит из имени файла, типа файла и тела файла (содержимое файла файл).

Атрибут содержимого — это логический атрибут [[!HTML]], который указывает, разрешено ли пользователю выбирать как файлы, так и каталоги; когда он установлен, пользовательский агент, который его поддерживает, должен запускать средство выбора каталога.

Интерфейс каталога

Интерфейс каталога представляет собой каталог во временном дереве каталогов. Методы и атрибуты в интерфейсе Каталога должны действовать так, как если бы это был текущий рабочий каталог.

При получении этот атрибут должен возвращать имя текущего рабочего каталога.

Нам нужен нормативный язык для символов, которые не разрешены в имени; нам также нужно определить, достаточно ли DOMString.

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

При вызове метода getFilesAndDirectories() пользовательский агент должен вернуть обещание последовательности файлов или каталогов с этим каталогом в качестве текущего рабочего каталога.

При вызове метода getFiles() пользовательский агент должен действовать следующим образом:

Если для необязательного параметра задано значение true , возвращается обещание последовательности плоских файлов с флагом recursive, установленным в true , с использованием этого каталога в качестве текущего рабочего каталога.

В противном случае параметру recursiveFlag присваивается значение false или он не определен. Возвратить обещание последовательности файлов с плоскими файлами с рекурсивным флагом, установленным в false , используя этот каталог в качестве текущего рабочего каталога.

Ввод файла

Дополнительную информацию об интерфейсе HTMLInputElement можно найти в спецификации HTML5.

При получении IDL-атрибут HTMLInputElement.allowdirs должен быть атрибутом content allowdirs и иметь значение true, если атрибут content allowdirs установлен, и false в противном случае.

Добавление множественного атрибута не меняет поведение, однако позволяет старым браузерам сделать так, чтобы ввод файла принимал несколько файлов вместо одного, поскольку они не распознают атрибут HTMLInputElement.allowdirs.

Если этот атрибут установлен, input.files ДОЛЖЕН возвращать null .

В связи с этим для извлечения выбранных файлов и каталогов необходимо вызывать HTMLInputElement.getFilesAndDirectories.

При получении этот атрибут должен иметь значение true, если пользовательский агент будет предоставлять одиночное средство выбора файлов и каталогов, и false, если пользовательский агент будет предоставлять отдельные средства выбора файлов и каталогов.

При вызове метода getFilesAndDirectories() пользовательский агент должен выполнить следующие шаги:

Пусть d будет непосредственным дочерним элементом корня временного дерева каталогов, представляющего каталог, из которого пользователь выбрал файлы и каталоги. Установите d в качестве текущего рабочего каталога.

Чтобы надежно получить все выборки, разработчикам следует вызывать этот метод после запуска события изменения в HTMLInputElement. Руководство по документации для разработчиков здесь было бы полезно.

При вызове метода getFiles() пользовательский агент должен выполнить следующие шаги:

Пусть d будет непосредственным дочерним элементом корня временного дерева каталогов, представляющего каталог, из которого пользователь выбрал файлы и каталоги. Установите d в качестве текущего рабочего каталога.

Если для необязательного параметра recursiveFlag задано значение true , возвращается обещание последовательности плоских файлов с флагом recursive, установленным в true , с использованием d в качестве текущего рабочего каталога.

В противном случае параметру recursiveFlag присваивается значение false или он не определен. Возвращает обещание сглаженной последовательности файлов с рекурсивным флагом, установленным в false , используя d в качестве текущего рабочего каталога.

При вызове метода ChooseDirectory() пользовательский агент должен вызвать средство выбора каталога в модели "Только средство выбора каталога".

Отправка формы

Когда форма отправляется с enctype="multipart/form-data" и вводится файл с атрибутом HTMLInputElement.allowdirs (и был выбран каталог с именем "docs"), она ДОЛЖНА придерживаться следующего шаблона в полезной нагрузке запроса. :

Пустые каталоги НЕ ДОЛЖНЫ включаться в полезные данные запроса.

Перетаскивание

Дополнительную информацию об интерфейсе DataTransfer можно найти в спецификации HTML5.

Атрибут файлов DataTransfer ДОЛЖЕН продолжать работать без каких-либо изменений в его поведении.

При вызове метода getFilesAndDirectories() пользовательский агент должен выполнить следующие шаги:

При вызове метода getFiles() пользовательский агент должен выполнить следующие шаги:

Пусть d будет непосредственным дочерним элементом корня временного дерева каталогов, представляющего каталог, из которого пользователь выбрал файлы и каталоги и который пользователь перетащил. Установите d в качестве текущего рабочего каталога.

Если для необязательного параметра recursiveFlag задано значение true , возвращается обещание последовательности плоских файлов с флагом recursive, установленным в true , с использованием d в качестве текущего рабочего каталога.

В противном случае параметру recursiveFlag присваивается значение false или он не определен. Возвращает обещание сглаженной последовательности файлов с рекурсивным флагом, установленным в false , используя d в качестве текущего рабочего каталога.

Перейдите в раздел Сайты и домены > имя домена > Диспетчер файлов.

кнопка загрузки изображения

Нажмите кнопку и выполните следующие действия:

Чтобы загрузить один файл, нажмите Загрузить файл, найдите и выберите файл, который хотите загрузить.

Чтобы загрузить один файл, несколько файлов или каталог с файлами в нем, нажмите «Загрузить каталог», а затем перетащите файлы или каталоги в пунктирную линию.

менеджер файлов изображений

Вы загрузили файл. Если это был архив, у вас осталось еще два шага.

Нажмите строку, соответствующую архиву, а затем нажмите «Извлечь файлы». Если в каталоге есть файлы, имена которых совпадают с именами, запакованными в архив, установите флажок «Заменить существующие файлы». Затем распакованные файлы заменят файлы в каталоге.

Нажмите "ОК".

Примечание. Диспетчер файлов может извлекать файлы из архивов следующих форматов: ZIP, RAR, TAR, TGZ и TAR.GZ.

Редактирование файлов в диспетчере файлов

По умолчанию вы можете редактировать страницы своего веб-сайта в диспетчере файлов, используя:

  • Редактор HTML, WYSIWYG-редактор, автоматически добавляющий необходимые теги HTML. Вы можете использовать этот редактор, если не знакомы с HTML.
  • Редактор кода, который открывает файлы HTML как текстовые файлы и выделяет синтаксис HTML. Лучше всего подходит для тех, кто хочет добавить теги HTML вручную.
  • Текстовый редактор, открывающий HTML-файлы как обычный текст.

Если ваш администратор Plesk установил расширение Rich Editor, вы также можете использовать его для редактирования файлов HTML в диспетчере файлов. Rich Editor — это редактор WYSIWYG, похожий на редактор кода, но с дополнительными функциями (например, встроенная проверка орфографии).

Чтобы отредактировать файл в диспетчере файлов:

  1. Наведите курсор на файл. Соответствующая строка будет выделена.
  2. Нажмите, чтобы открыть контекстное меню файла.
  3. Нажмите «Редактировать в … редакторе» (название кнопки зависит от редактора, который вы хотите использовать).

Поиск файлов в диспетчере файлов

значок изображения

В Диспетчере файлов вы можете искать файлы, ища текст только в имени файла, только в содержимом или в обоих случаях. Чтобы выбрать способ поиска файлов, щелкните значок рядом с полем поиска, а затем выберите нужный тип поиска.

Быстро и легко загружайте файлы, просто перетаскивая их прямо в браузер. Большинство современных браузеров даже позволяют перетаскивать целые папки одновременно.

Загрузка в Filecamp

Пользователи с разрешением на загрузку папки могут загружать ресурсы. Вы можете перетаскивать файлы и целые структуры папок со своего компьютера прямо в окно Filecamp.

Перейдите к папке, в которую вы хотите загрузить файлы. Нажмите значок «Загрузить» на панели инструментов.

Image

Перетащите файлы и папку в область, обведенную пунктирной линией. Или нажмите «Выбрать файлы» или «Выбрать папку» в зависимости от того, какой метод вы предпочитаете.

Image

Примечание. Вы можете выбрать несколько файлов для загрузки, удерживая клавишу Command или Control (Mac или Windows соответственно) при выборе файлов и папок.

Просмотрите полный список всех файлов и папок, которые вы выбрали для загрузки.

Image

Нажмите ЗАГРУЗИТЬ, когда будете готовы начать процесс загрузки.

Image

Нажмите OK, ПОНЯЛ, когда процесс загрузки завершится. И вы будете перенаправлены в папку, где вы можете просмотреть только что загруженные файлы и папки.

ОСОБЕННОСТИ
Конфликтующие имена файлов при загрузке файлов

Если вы загружаете файлы и файлы с теми же именами файлов, которые уже существуют в местоположении, в которое вы загружаете; вам будет предложено заменить или переименовать эти файлы. Если вы выберете «Заменить», эти файлы будут заменены новыми файлами, а общие ссылки теперь будут указывать на новые файлы.

Если вы выберете «Переименовать», к новому имени файла будет добавлено число (1) в качестве расширения, и как новый, так и «старый» файлы останутся в папке.

Если вы загружаете папку с ТОЧНО тем же именем, что и у существующей папки в том же месте, файлы будут объединены в существующую папку.

ВНИМАНИЕ: Filecamp позволяет возобновить операцию загрузки после прерывания сети или другого сбоя передачи, экономя время и пропускную способность в случае сетевых сбоев. Это немного технически, но загрузки в Filecamp делятся на куски по 1 МБ, и эти куски хранятся на наших серверах в течение 15 минут. Поэтому, если загрузка не удалась, вы можете возобновить процесс загрузки в течение 15 минут. Если загрузка по-прежнему не удалась, попробуйте подождать 15 минут перед повторной загрузкой того же файла. Если вы хотите начать все сначала раньше, вы можете переименовать файл перед повторной загрузкой.

СОВЕТ. Вы также можете получить доступ к своему Filecamp через FTP/WebDAV, если вы предпочитаете этот метод для загрузки больших файлов или даже очень больших и сложных структур папок. Узнайте больше о доступе через WebDAV/FTP.

Амит Агарвал

Функция загрузки файлов в Google Forms позволяет получать файлы от респондентов прямо на ваш Google Диск.Вы можете добавить вопрос "Загрузить файл" в свою форму Google, чтобы получать задания в формате PDF от студентов, заявки на резюме, изображения портфолио от участников и т. д.

Когда респондент загружает файл через Google Forms, файл сохраняется в фиксированной папке на вашем Google Диске. Все файлы загружаются в одну и ту же папку, и, таким образом, глядя на файл на вашем Google Диске, трудно определить, какой респондент загрузил какой набор файлов.

Однако мы можем использовать скрипт Google Apps с триггерами форм Google, чтобы мгновенно упорядочивать файлы на Google Диске, как только они загружаются респондентом формы. Вы можете изменить папку назначения, в которой хранятся файлы, или создать собственные папки на основе ответа формы.

Организовать загрузку файлов на Google Диск

Папка Google Диска

В следующем примере мы создадим родительскую папку на Google Диске для размещения всех загруженных файлов. Каждый ответ формы будет иметь свою собственную вложенную папку, и все файлы для этой конкретной записи формы будут находиться в одной папке.

Создать родительскую папку

Для начала перейдите на свой Google Диск и создайте новую папку (или используйте существующую папку). Откройте папку и возьмите идентификатор папки из адресной строки браузера, как показано на снимке экрана.

Добавить скрипт Google

Затем перейдите в форму Google, которая принимает загрузку файлов, и выберите «Редактор сценариев» в меню с тремя точками.

Редактор скриптов Google Forms

Совет. Сценарий также можно улучшить, чтобы создавать собственные имена папок на основе ответов пользователя в форме ответа.

Создать триггер OnFormSubmit

В редакторе сценариев выберите в раскрывающемся списке функций пункт "Инициализировать" и нажмите кнопку "Выполнить", чтобы создать триггер OnFormSubmit для текущей формы Google.

По сути, код Apps Script будет запускаться всякий раз, когда кто-то отправляет новую запись формы и загружает файлы в определенную папку на Google Диске.

OnFormSubmit Trigger

Вот и все. Перейдите в свою форму Google и отправьте новую тестовую запись. Теперь вы должны увидеть все загруженные файлы, аккуратно организованные в пользовательской папке в родительской папке. Имя пользовательской папки — это уникальный идентификатор ответа, который Google Forms автоматически присваивает каждой отправке формы.

PS: вы можете комбинировать загрузку файлов в Google Forms с Document Studio для создания настраиваемых PDF-файлов (сертификатов, удостоверений личности сотрудников и т. д.) из загруженных изображений

Читайте также: