Как загрузить файл на сайт
Перейти к содержимому

Как загрузить файл на сайт

  • автор:

Как добавить файл на сайт?

Для загрузки файлов на сайт используется виджет «Файл», который расположен в конструкторе во вкладке «Медиа».

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

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

Текстовые файлы
Графические файлы

  • vnd;
  • djvu;
  • png;
  • jpg / jpeg;
  • gif;
  • tiff;
  • x-icon;
  • bmp;
  • x-bmp;
  • x-ms-bmp.

Другие файлы

  • .*opendocument.*;
  • .*ms-excel;
  • .*openxmlformats.*;
  • msword;
  • pdf;
  • zip;
  • x-rar;
  • x-tar;
  • x-gzip.

Примечание:

Максимальный размер загружаемого файла — 30 Мб.

Для виджета «Файл» доступны следующие настройки:

  • Указать название файла, которое будет отображаться посетителям.
  • Добавить описание файла.
  • Назначить действие по клику на файл: скачать файл, открыть в текущем или новом окне. По умолчанию все файлы скачиваются. Настройка открытия в окне браузера доступна для всех типов файлов, но если браузер не поддерживает этот тип файла для просмотра, то он будет скачан.
  • Выбрать дизайн отображения виджета из предложенных.
  • Установить выравнивание элементов виджета.
  • Настроить отображение элементов виджета.
  • Добавить класс виджету.
  • Включить сбор статистики.

Примечание:

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

Попробуйте прямо сейчас!

Как добавить файлы для скачивания на сайт: три способа размещения файлов на странице

В конструкторе «Нубекс» существует три основных способа разместить на странице сайта файлы для скачивания:

1. Прикрепить их к тексту страницы в виде гиперссылки;

Пример файла, прикрепленного к тексту страницы

2. Добавить на страницу в виде блока;

Пример файлов для скачивания, опубликованных с помощью блоков страницы

3. Вставить в узкую колонку сайта (левую или правую) с помощью виджета.

Пример файлов, опубликованных в узкой колонке сайта с помощью виджета прайс-лист

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

Способ 1. Прикрепить файл для скачивания к тексту страницы

Как показано на скриншоте выше, с помощью этого способа можно сделать ссылку на скачивание файла прямо в тексте страницы. Это удобно, если файл всего один (или их совсем немного), и для него нет смысла создавать на странице отдельный блок. Кроме того, гиперссылка в тексте смотрится весьма изящно: даже если прикрепленный файл называется «Документ1», на сайте ссылка на него отобразится в виде введенного вами текста.

Примеры отображения гиперссылок на файлы, прикрепленные к тексту страницы

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

Способ 2. Загрузить файлы для скачивания с помощью блоков страницы

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

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

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

Способ 3. Разместить скачиваемые файлы в узкой колонке сайта

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

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

При загрузке файлов с помощью виджета уделяйте внимание названиям

  • Как создать сайт самостоятельноКак создать сайт самостоятельно
  • Работа со страницамиРабота со страницами
  • Наполнение страницНаполнение страниц
  • Работа с изображениями и файламиРабота с изображениями и файлами
  • ФотогалереиФотогалереи
  • НовостиНовости
  • Каталог товаровКаталог товаров
  • Интернет-магазинИнтернет-магазин
  • Формы обратной связиФормы обратной связи
  • ВиджетыВиджеты
  • Функции продвиженияФункции продвижения
  • Доступ в систему управленияДоступ в систему управления
  • Внешние сервисыВнешние сервисы
  • ДизайнДизайн

Как загрузить файл на свой сайт?

В данный момент загрузить файлы прямо на Tilda не получится.

Используйте сторонние облачные сервисы (Google Drive, Dropbox и подобные), затем вставьте ссылку на файл в кнопку или текст.

Для лучшего отображения мы добавили специальные кнопки с иконками загрузки файлов: BF802 и BF803, категория «Кнопка».

Похожие вопросы
  • Как сделать кликабельным номер телефона?
  • Как убрать «Made on Tilda» внизу страницы (в подвале сайта)?
  • Как передать сайт или страницу на другой аккаунт?
  • Почему не видны изменения после публикации, а в предпросмотре есть?
  • Как добавить сторонний виджет (калькулятор, календарь и др.)?

Загрузка файлов

Для того чтобы можно было загружать на сервер один или несколько файлов, в форме применяется специальное поле. В браузерах Firefox, IE и Opera такой элемент отображается как текстовое поле, рядом с которым располагается кнопка с надписью «Обзор. » (рис. 1). В Safari и Chrome доступна только кнопка «Выберите файл» (рис. 2).

Вид поля для загрузки файла в Firefox

Рис. 1. Вид поля для загрузки файла в Firefox

Загрузка файлов в Chrome

Рис. 2. Загрузка файлов в Chrome

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

Синтаксис поля для отправки файла следующий.

Атрибуты перечислены в табл. 1.

Табл. 1. Атрибуты поля для отправки файла

Атрибут Описание
accept Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
size Ширина текстового поля, которое определяется числом символов моноширинного шрифта.
multiple Позволяет выбирать и загружать сразу несколько файлов.
name Имя поля, используется для его идентификации обработчиком формы.

Прежде, чем использовать данное поле, в форме необходимо сделать следующее:

  1. задать метод отправки данных POST ( method=»post» );
  2. установить у атрибута enctype значение multipart/form-data .

Форма для загрузки файла продемонстрирована в примере 1.

Пример 1. Создание поля для отправки файла

HTML5 IE Cr Op Sa Fx

    Отправка файла на сервер   

Хотя можно установить ширину поля через атрибут size , в действительности ширина никак не влияет на результат работы формы. В браузерах Safari и Chrome этот атрибут вообще никакого воздействия не оказывает.

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

Если атрибут accept не указывать, тогда добавляются и загружаются файлы любого типа. Наличие accept позволяет ограничить выбор файла, что особенно важно, когда требуется загрузить только изображение или видео. В качестве значения выступает MIME-тип, несколько значений разделяются между собой запятой. Также можно использовать следующие ключевые слова:

  • audio/* — выбор музыкальных файлов любого типа;
  • image/* — графические файлы;
  • video/* — видеофайлы.

В табл. 2 показаны некоторые допустимые значения атрибута accept .

Табл. 2. Типы файлов

Значение Описание
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 несколько изменился вид поля.

Загрузка файлов в Opera

Рис. 3. Загрузка файлов в Opera

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *