Загрузка файлов
Для того чтобы можно было загружать на сервер один или несколько файлов, в форме применяется специальное поле. В браузерах 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 несколько изменился вид поля.
Рис. 3. Загрузка файлов в Opera
Советы по HTML : Внедрение элементов в html-страницу : Как вставить в html-страницу документы MS Office (Word, Excel и т.д.)
Вставить документы Оффиса можно при помощи плавающего фрейма . Для этого достаточно указать только адрес вставляемого документа и размеры фрейма. Если размеры фрейма не указывать, то размер на странице будет: width — 300 пикселов, height — 150 пикселов (это значение для iframe по умолчанию).
Вставить в html-страницу документ Microsoft Word можно следующей строкой:
По аналогии можно вставить в html-страницу документ Microsoft Excel:
Это может быть полезно, например, если на страницах нужно выложить часто обновляемые прайсы, а переводить их в html-вид затруднительно.
Однако, на мой взгляд, перебарщивать с этим не стоит, т.к. обычно файлы офиса достаточно много «весят», а это для многих пользователей может быть решающим фактором.
Кроме того, данная конструкция у большинства пользователей без дополнительных настроек браузеров (IE, FF, Opera, Safari)работать не будет. Фрейм останется пустым (Safari), или будет предложено сохранить файл на диск или открыть в Word/Excel (IE, FF, Opera).
Самый простой способ — сохранить исходный файл Word/Excel с помощью команды: File -> Save as WEB. (Файл -> Сохранить как веб-страницу. ) и полученный файл html уже вставлять в iframe.
Как вставить html файл в другой html файл?
Артём: Обычно ваш код будет прикручен к какой-либо CMS, в которой, слайдер, скорее всего будет выступать отдельным модулем. Но даже в упрощенном допущении — все серверные языки поддерживают операцию инклуда файлов.
Другое дело, если вы разрабатываете предварительную верстку для передачи ее программисту, и вам неудобно работать с «простыней» кода. В этом случае разработчики используют так называемые системы сборки, которые и позволяют собирать файлы из кусочков, выполнять пре- и постпроцессинг над стилевыми и джаваскрипт-файлами, минифицировать их и прочее. Наиболее популярные — gulp, grunt, webpack и т.п.
Импорты
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Новая спецификация «HTML Imports» описывает, как вставить один документ в другой при помощи HTML-тега .
Зачем?
Мы ведь и так можем вставлять документ в документ, при помощи , зачем нужен ещё какой-то импорт? Что не так с iframe ?
…С iframe всё так. Однако, по своему смыслу iframe – это отдельный документ.
- Для iframe создаётся полностью своё окружение, у него свой объект window и свои переменные.
- Если iframe загружен с другого домена, то взаимодействие с ним возможно только через postMessage .
Это хорошо, когда нужно действительно в одной странице отобразить содержимое другой.
А что, если нужно встроить другой документ как естественную часть текущего? С единым скриптовым пространством, едиными стилями, но при этом – другой документ.
Например, это нужно для подгрузки внешних частей документа (веб-компонент) снаружи. И желательно не иметь проблем с разными доменами: если уж мы действительно хотим подключить HTML с одного домена в страницу на другом – мы должны иметь возможность это сделать без «плясок с бубном».
Иначе говоря, – это аналог , но для подключения полноценных документов, с шаблонами, библиотеками, веб-компонентами и т.п. Всё станет понятнее, когда мы посмотрим детали.
Пример вставки
- В отличие от тег может быть в любом месте документа, даже в .
- При вставке через документ показывается внутри фрейма. В случае с это не так, по умолчанию документ вообще не показывается.
HTML, загруженный через имеет отдельный DOM документа, но скрипты в нём выполняются в общем контексте страницы.
Файл, загруженный через , обрабатывается, выполняются скрипты, строится DOM документа, но не показывается, а записывается в свойство link.import .
Мы сами решаем, где и когда его вставить.
В примере ниже подключает документ timer.html и, после его загрузки, вызывает функцию show . Эта функция через link.import.querySelector(‘time’) выбирает интересующую часть подгружённого документа и вставляет её в текущий:
В файле timer.html находится элемент и скрипт, который его «оживляет»:
var localDocument = document.currentScript.ownerDocument; var timer = localDocument.getElementById('timer'); var timerId = setInterval(function() < timer.innerHTML++; >, 1000);