Как загрузить файлы на сайт
Загрузка файлов
Для того чтобы можно было загружать на сервер один или несколько файлов, в форме применяется специальное поле. В браузерах Firefox, IE и Opera такой элемент отображается как текстовое поле, рядом с которым располагается кнопка с надписью «Обзор. » (рис. 1). В Safari и Chrome доступна только кнопка «Выберите файл» (рис. 2).
Рис. 1. Вид поля для загрузки файла в Firefox
Рис. 2. Загрузка файлов в Chrome
При нажатии на кнопку открывается окно для выбора файла, где можно указать, какой файл пользователь желает использовать.
Синтаксис поля для отправки файла следующий.
Атрибуты перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| accept | Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. |
| size | Ширина текстового поля, которое определяется числом символов моноширинного шрифта. |
| multiple | Позволяет выбирать и загружать сразу несколько файлов. |
| name | Имя поля, используется для его идентификации обработчиком формы. |
Прежде, чем использовать данное поле, в форме необходимо сделать следующее:
- задать метод отправки данных 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 несколько изменился вид поля.
Как загрузить файлы для скачивания на свой хостинг и получить ссылку?
Привет! В этой емкой инструкции поделюсь, как загрузить файлы для скачивания на свой хостинг – например, материалы в архиве или отдельно pdf-документы, и поделиться ссылкой на скачивание.
Это как альтернатива облачному хранилищу, когда вы можете давать ссылку на скачивание не с облака Яндекс, Гугл и т.п., а напрямую с вашего хостинга. Но минус тоже есть – если размещать тяжеловесные файлы от 500 мегабайт/1 гигабайт и таких файлов у вас много, то быстро можно исчерпать место на хостинге, и придется покупать более дорогие тарифы. Для небольших весом архивов, pdf-ок обычного хостинга с дисковым пространством 5-10 гигабайт будет более чем достаточно.
Итак, давайте на примере разберем, как происходит процесс загрузки файлов в архиве или отдельных pdf-документов на хостинг, как берется ссылка на эти файлы и происходит скачивание.
Вы можете посмотреть мой видеоурок ниже:
Загружать файлы вы можете в корневую папку вашего существующего сайта, например, где установлен Вордпресс – мешать работе сайта они никак не будут. Но можно зарегистрировать отдельный домен (или создать бесплатный поддомен от уже купленного домена). Создать с ним сайт (не ставить на него Вордпресс), а использовать чисто под загрузку файлов, чтобы не мешать все в кучу.
Главное, чтобы ваш тариф хостинга позволял создать более чем 1 сайт. Если у вас доступен только 1 сайт, то загружайте файлы в его корневую папку.
Давайте рассмотрим на примере с отдельным сайтом на поддомене. Показываю на своем хостинге Timeweb. Поддомен тут создается в пару кликов.
Идем в раздел «Домены и поддомены». Напротив домена жмем по иконке плюса (добавить поддомен).
Указываем название поддомена – короткое латиницей или цифры.
На этом же шаге можем сразу создать сайт с нашим поддоменом. Для этого выбираем «Создать директорию» и указываем ее название. Лучше всего называть директорию так же, как называется ваш поддомен, чтобы не путаться.
Ниже под вашим доменом отобразится добавленный поддомен.
А в разделе «Сайты» отобразится ваш новый сайт:
Также в разделе «Файловый менеджер» появляется корневая папка этого сайта (она называется аналогично директории, к которой привязан домен) – в эту папку и загружаются любые файлы.
Загрузим архив с материалами, которыми хотим поделиться для скачивания. К примеру, у меня есть бесплатность – комплект чек-листов для набора подписчиков. На компьютере они лежат в папке, для загрузки на хостинг я ее запакую в архив. Например, в zip. Но перед этим обязательно нужно назвать папку латиницей, без пробелов и лишних символов.
Для добавления в архив, нажимаем по папке правой кнопкой мыши – выбираем пункт “Добавить в архив”.
Затем иду на хостинг в «Файловый менеджер», захожу в корневую папку своего сайта (открываю двойным кликом левой кнопкой мыши).
Внутри открываю папку public_html и в нее загружаю свой архив.
Загрузить можно перетаскиванием архива с рабочего стола компьютера на строку «Чтобы добавить файлы, перетащите их в это окно». Просто сворачиваем браузер, идем на рабочий стол, жмем по архиву левой кнопкой мыши и, удерживая, тянем его во вкладку браузера с открытой корневой папкой.
При загрузке этим способом нас спрашивают «Распаковать архив?» – распаковывать не надо. Выбираем «Только загрузить».
Второй вариант загрузки – через вкладку «Файл» – «Загрузить на сервер».
Таким образом, архив оказывается в корневой папке нашего сайта на хостинге.
Ссылка на скачивание архива формируется так: ваш домен/название архива.zip или ваш домен/название архива.rar (то есть в конце после точки обязательно добавляется формат архива).
В моем случае ссылка на скачивание архива выглядит так: 123.viktoriiakarpova.ru/lists.zip
При этом, когда мы переходим по ссылке на архив, тут же происходит его скачивание без дополнительных действий со стороны пользователя.
А теперь загрузим рdf-книгу, ссылкой на скачивание которой хотим поделиться.
Точно также идем в корневую папку сайта в «Файловом менеджере» и через вкладку «Файл» – «Загрузить на сервер» загружаем наш pdf с рабочего стола. Или перетаскиваем левой кнопкой мыши в строку загрузки.
Как и архив, pdf должен называться латинскими буквами без пробелов и лишних символов. Можно использовать дефис или нижнее подчеркивание в названии.
Ссылка на скачивание этого файла формируется так: ваш домен/название документа.pdf. Здесь аналогично – в конце после точки обязательно добавляется формат документа.
В моем случае ссылка выглядит так: 123.viktoriiakarpova.ru/keys.pdf
Когда мы перейдем по ссылке, pdf документ откроется в браузере – его можно просматривать онлайн (все ссылки внутри будут кликабельны), либо скачать себе, нажав вверху справа по стрелке.
кликните на скриншот для увеличения
Кстати, этот вариант с загрузкой pdf на хостинг можно использовать для добавления политики конфиденциальности, договора-оферты на свой сайт и т.д.
Итак, в этой статье мы разобрались с вопросом – как загружать на свой хостинг файлы (архивы, pdf документы) и делиться ссылкой на их скачивание.
