Как выбрать файл для загрузки
Обновлено: 06.07.2024
С появлением управляемого приложения и веб-клиента некоторые задачи, которые решались в обычном приложением за несколько строчек, существенно усложнились. Казалось бы такая простая и часто используемая операция, как интерактивный выбор файла, которая в обычном приложении решалась в одном методе, теперь требует создания цепочки из нескольких процедур, которые вызываются одна за другой через ОписаниеОповещения. Вот как это было с использованием модальных вызовов:
Но как эту задачу решить на веб-клиенте? В поисковике не удалось найти готового универсального решения. Поискал в типовых, но там все разбросано по модулям и как-то запутано. Посмотрел пример в консоли СКД с диска ИТС для управляемых форм. Там тоже надо вычленять по кусочкам все шаги. Кроме того там применяется одна фича, которая позволяет открывать диалог выбора файла без установленного расширения работы с файлами. Но в общем случае эта хитрость не подойдет, так как она работает только для существующих файлов, насколько я понял. Поэтому написал процедуры, которые можно просто скопировать и использовать в будущем, не тратя время на то, чтобы вспоминать, как это работает.
Диалог выбора файла
Сразу приведу код, который получился после упрощения.
Я специально привел ранее вариант для обычных форм, чтобы проще было сравнивать. Код разбился на две примитивные процедуры и практически не изменился за счет метода ВыполнитьСценарийВыбораФайла(). Этот метод скрывает все рутинные асинхронные действия:
- подключает расширение по работе с файлами
- если расширение не подключено, то задает пользователю вопрос по его подключению
- начинает установку расширения, если пользователь подтвердит это действие
- открывает диалог выбора файла
- передает результаты выбора файла назад в прикладную процедуру КаталогНачалоВыбораЗавершение()
Далее приведу код этой служебной процедуры, написанной по принципу, из этой статьи.
То есть вместо того, чтобы писать несколько процедур с труднопонимаемыми названиями в стиле ЗагрузитьФайлКонсолиПослеПодключенияРасширенияПослеПомещенияФайла() , вся последовательность действий описана в одной. Кроме того, можно заметить, что она универсальная и не содержит зависимостей от контекста формы. То есть ее можно перенести в другую форму простым копированием
Загрузка файлов с клиента на сервер
Постановка задачи: пусть требуется метод, который умеет помещать на сервер выбранный на клиенте файл. Если выбранный файл является каталогом, то необходимо поместить на сервер все файлы, содержащиеся в этом каталоге (подчиненные каталоги игнорировать).
Последовательность асинхронных действий:
- определить является ли файл каталогом
- если не является, то добавить его в массив помещаемых файлов
- если является, то найти все файлы этого каталога
- каждый из найденных файлов проверить является ли он каталогом. Если не является то добавить в массив помещаемых файлов (каждая итерация цикла обхода файлов является асинхронной, потому что вместо синхронного Файл.ЭтоФайл() необходимо использовать его аналог Файл.НачатьПроверкуЭтоФайл())
- поместить файлы на сервер
- вернуть результат помещения в прикладную процедуру, которая будет выполнять обработку файлов по какому-то алгоритму
Данная задача снова решается за три простых шага
Все детали скрыты в процедуре ВыполнитьСценарийЗагрузкиФайлаНаСервер(), которая подходит как для файлов, так и для каталогов. При необходимости ее можно доработать, чтобы она покрывала больше случаев.
Файл для скачивания
К публикации прилагается пример, который можно использовать как шаблон для описанных операций. В нем реализованы несколько наиболее востребованных случаев: выбор существующего файла, выбор имени файла для сохранения, выбор каталога и множественный выбор. Для полноты картины приведены аналогичные операции для обычных форм. Тестировались процедуры на платфроме 8.3, на конфигурацях начиная с режима совместимости 8.2.13
Для загрузки на сервер одного или нескольких файлов вроде фотографий, документов и видео применяется специальное поле формы. В браузере IE такой элемент отображается как текстовое поле, рядом с которым располагается кнопка с надписью «Обзор. » (рис. 1). В Safari, Opera и Chrome доступна только кнопка «Выбрать файлы» (рис. 2), в Firefox это только кнопка «Обзор» (рис. 3).
Рис. 1. Вид поля для загрузки файла в IE
Рис. 2. Загрузка файлов в Opera и Chrome
Рис. 3. Загрузка файлов в Firefox
При нажатии на кнопку открывается окно для выбора файла, где можно указать, какой файл пользователь желает использовать.
Синтаксис поля для отправки файла следующий.
Атрибуты перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| name | Имя поля; используется для его идентификации обработчиком формы. |
| disabled | Блокирует поле для отправки файлов. |
| form | Идентификатор формы для связывания поля с элементом <form> . |
| type | Для загрузки файлов значение должно быть file . |
| accept | Устанавливает фильтр на типы файлов, которые вы можете открыть через поле загрузки файлов. |
| autofocus | Поле получает фокус после загрузки документа. |
| required | Указывает, что поле является обязательным для заполнения. |
| multiple | Позволяет выбирать и загружать сразу несколько файлов. |
Для отправки файлов в форме необходимо сделать следующее:
- задать метод отправки данных POST ( method="post" );
- установить у атрибута enctype значение multipart/form-data .
Кроме того, данное поле нельзя вставлять внутрь ссылки и кнопки.
Форма для загрузки файла продемонстрирована в примере 1.
Пример 1. Создание поля для отправки файла
Атрибут multiple важен, он позволяет не ограничиваться одним файлом для выбора, а указать сразу несколько файлов для одновременной загрузки (пример 2). Выбор нескольких файлов происходит с помощью мыши или клавиатуры через клавиши Ctrl и Shift .
Пример 2. Загрузка нескольких файлов
Если атрибут accept не указывать, тогда добавляются и загружаются файлы любого типа. Наличие accept позволяет ограничить выбор файла, что особенно важно, когда требуется загрузить только изображение или видео. В качестве значения выступает MIME-тип, несколько значений разделяются между собой запятой. Также можно использовать следующие ключевые слова:
- audio/* — выбор музыкальных файлов любого типа;
- image/* — графические файлы;
- video/* — видеофайлы.
В табл. 2 показаны некоторые допустимые значения атрибута accept .
| Значение | Описание |
|---|---|
| image/jpeg | Только файлы в формате JPEG. |
| image/jpeg,image/png | Только файлы в формате JPEG и PNG. |
| image/* | Любые графические файлы. |
| image/*,video/* | Любые графические и видеофайлы. |
Использование дополнительных атрибутов показано в примере 3.
Пример 3. Загрузка фотографий
Загрузка файлов из интернета или скачивание и отправка информации – это задачи, которые возникают в процессе изучения глобальной сети.
Загрузка (скачивание) означает получение данных или файла из интернета на ваш компьютер. Отправка (выгрузка) означает отправку данных или файла с вашего компьютера куда-то или кому-то в интернет.
Эти термины описывают действия, которые вы, возможно, уже научились делать. Если вы когда-либо открывали документ в браузере и скачивали его, делились фотографиями в социальных сетях, отправляли файлы по электронной почте – вы уже выполняли загрузку и отправку файлов через интернет.
Загрузка файлов из интернета (скачивание)
Обычно для загрузки файла нужно кликнуть на ссылку этого файла. В зависимости от типа файла браузер предложит один из вариантов его загрузки.
Если вы нажмёте на ссылку, ваш браузер предложит вам выбрать один из двух способов загрузки файла.
Многие современные браузеры могут предварительно открывать документ с возможностью скачать его на компьютер или распечатать.
В любом случае, как только вы нажмёте кнопку ОК, начнётся загрузка. Ваш браузер будет указывать прогресс и время, оставшееся на загрузку.
После того как загрузка будет завершена, файл будет сохранён на вашем компьютере или откроется в программе, которую вы выбрали. Обычно файлы из интернета загружаются в папку «Загрузки или Downloads».
Если в вашем браузере запускается предварительный просмотр файла, а вы не знаете, как его отключить, то в таком случае можно щёлкнуть на ссылку правой кнопкой мыши, затем нажать «Сохранить ссылку как» и выбрать место для загрузки файла.
А ещё можно сохранить файл в «Облако» и использовать его с любого вашего устройства. Удобная возможность, так как с документом можно работать на компьютере, просматривать на смартфоне и работать коллективно над одним проектом.
Загрузка файлов в интернет
Если сайт позволяет загружать файлы в интернет, он будет иметь интерфейс загрузки, чтобы помочь выполнить передачу файлов. Обычно сайты имеют похожие элементы добавления файлов и схожие шаги по выбору и добавлению их на сайт.
Кнопка загрузки на сайте открывает диалоговое окно, где нужно выбрать файл и начнётся процесс загрузки файла в интернет.
Нужно перейти к месту хранения файла, выбрать его, затем нажать кнопку «Открыть».
После этого на странице появится индикатор выполнения, отслеживающий процесс загрузки.
Многие другие утилиты загрузки имеют аналогичные функции. Мобильные приложения организованы ещё проще, поделиться своим фото или документов можно буквально в два «тыка» пальцем.
Такими вот нехитрыми способами можно загружать и скачивать файлы в интернете. Пробуйте, друзья. Если будут вопросы, задавайте их в комментариях.
Для того чтобы можно было загружать на сервер один или несколько файлов, в форме применяется специальное поле. В браузерах Firefox, IE и Opera такой элемент отображается как текстовое поле, рядом с которым располагается кнопка с надписью «Обзор. » (рис. 1). В Safari и Chrome доступна только кнопка «Выберите файл» (рис. 2).
Рис. 1. Вид поля для загрузки файла в Firefox
Рис. 2. Загрузка файлов в Chrome
При нажатии на кнопку открывается окно для выбора файла, где можно указать, какой файл пользователь желает использовать.
Синтаксис поля для отправки файла следующий.
Прежде, чем использовать данное поле, в форме необходимо сделать следующее:
- задать метод отправки данных POST ( method="post" );
- установить у атрибута enctype значение multipart/form-data .
Форма для загрузки файла продемонстрирована в примере 1.
Пример 1. Создание поля для отправки файла
HTML5 IE Cr Op Sa Fx
Хотя можно установить ширину поля через атрибут size , в действительности ширина никак не влияет на результат работы формы. В браузерах Safari и Chrome этот атрибут вообще никакого воздействия не оказывает.
Атрибут multiple более важен, он позволяет не ограничиваться одним файлом для выбора, а указать их сразу несколько для одновременной загрузки.
Если атрибут accept не указывать, тогда добавляются и загружаются файлы любого типа. Наличие accept позволяет ограничить выбор файла, что особенно важно, когда требуется загрузить только изображение или видео. В качестве значения выступает MIME-тип, несколько значений разделяются между собой запятой. Также можно использовать следующие ключевые слова:
- audio/* — выбор музыкальных файлов любого типа;
- image/* — графические файлы;
- video/* — видеофайлы.
В табл. 2 показаны некоторые допустимые значения атрибута accept .
| Значение | Описание |
|---|---|
| image/jpeg | Только файлы в формате JPEG. |
| image/jpeg,image/png | Только файлы в формате JPEG и PNG. |
| image/* | Любые графические файлы. |
| image/*,video/* | Любые графические и видеофайлы. |
Использование дополнительных атрибутов показано в примере 2.
Пример 2. Загрузка фотографий
HTML5 IE 10+ Cr Op Sa Fx
Не все браузеры поддерживают новые атрибуты. IE полностью игнорирует multiple и accept , Safari не поддерживает accept , а Firefox не работает с MIME-типом, только с ключевыми словами. Поэтому в примере выше специально для Firefox установлено значение image/*,image/jpeg . Также учтите странную ошибку в Опере, она не допускает пробелы после запятой внутри accept .
Результат примера показан на рис. 3. Обратите внимание, что из-за наличия multiple несколько изменился вид поля.
Читайте также: