Узнать путь до файла html

Что такое абсолютный и относительный путь к файлу

Всё дело в том, что в разных ситуациях нам нужно указывать абсолютный путь к файлу (длинная запись), а в других — относительный (короткий). Посмотрим, что это — во имя компьютерной грамотности.

Абсолютный путь к файлу

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

В Windows всё начинается с диска — это может быть C:, D: или диск с любой другой буквой. Если на диске C: сделать папку Thecode, внутри неё — папку Media, а в Media положить файл «статья.txt», то абсолютный путь к этому файлу будет такой:

Полный путь к файлу в Windows формируется так: Диск → все вложенные папки → имя файла. Обратите внимание — названия дисков, папок и файлов отделяются друг от друга обратной косой чертой.

❌ C\Thecode\Media\статья.txt ← пропущено двоеточие после буквы диска.

❌ C: Thecode Media статья.txt ← нет разделителей между названиями папок и файлов.

❌ C:\Thecode\Media ← это путь к папке, но имя файла не указано.

В MacOS у дисков нет отдельной назначенной буквы, поэтому всё начинается с корневой папки /, внутри которой и находятся все остальные папки.

Кстати, в MacOS, Linux и любой UNIX-подобной файловой системе все диски — это тоже папки. Например, когда мы делали скрипт для бэкапа, то флешка с названием WIN10_64 находилась по такому адресу: /Volumes/WIN10_64. А всё потому, что все новые диски по умолчанию подключаются как папки внутри папки /Volumes.

Ещё одно отличие MacOS и Linux в том, что вместо обратной косой черты используется просто косая черта, у которой наклон в другую сторону: /. Всё остальное работает по тому же принципу: в абсолютном пути мы собираем все папки, которые нужно пройти, начиная с корня.

Например, если у нас есть в документах папка Notes, внутри которой лежит markdown-файл с задачами на день tasks.md, то полный путь к нему будет в MacOS выглядеть так:

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

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

Относительный путь к файлу

Относительный путь — это путь к файлу относительно текущего каталога. Текущий каталог — это тот, в котором запускается скрипт, программа или открывается страница в браузере.

Например, если мы в папку Notes из примера выше положим файлы нашего калькулятора на JavaScript, то абсолютные пути к каждому файлу будут выглядеть так:

/Users/mike/Documents/Notes/index.html
/Users/mike/Documents/Notes/style.css
/Users/mike/Documents/Notes/script.js

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

index.html
style.css
script.js

Когда браузер встретит такой путь, он возьмёт путь к каталогу, где лежит страница, и в нём будет искать эти файлы. А если нам понадобится файл data.json из папки Documents, которая лежит уровнем выше, то мы можем обратиться к нему так:

Первая точка означает текущий каталог, вторая — на уровень выше, а косая черта — что нам нужно зайти в тот каталог и взять оттуда файл data.json.

Когда что использовать

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

Общее правило будет такое: если вы работаете со своими файлами, лучше указывать относительный путь, а если нужен чужой файл из интернета — то абсолютный.

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

Источник

HTML Путь к файлу

Путь к файлу описывает расположение файла в структуре папок веб сайта.

Примеры пути к файлам

Путь	Описание
	picture.jpg находится в той же папке, что и текущая страница
	picture.jpg находится в папке images в текущей папке
	picture.jpg находится в папке images в корне текущего веб-сайта
	picture.jpg находится в папке на один уровень выше текущей папки

Пути к HTML файлам

Путь к файлу описывает расположение файла в структуре папок вебсайта.

Пути к файлам используются при связывании с внешними файлами, например:

Абсолютные пути к файлам

Абсолютный путь к файлу — это полный URL адрес файла:

Пример

Теги и атрибуты src и alt описаны в главе HTML Изображения.

Относительные пути к файлам

Относительный путь к файлу указывает на файл относительно текущей страницы.

В этом примере путь к файлу указывает на файл в папке images, расположенной в корне текущего веб-сайт:

Пример

В этом примере путь к файлу указывает на файл в папке images находятся в текущей папке:

Пример

В этом примере путь к файлу указывает на файл в папке images находятся в папке на один уровень выше текущей папки:

Пример

Практика HTML лучше всего

Рекомендуется использовать относительные пути к файлам (если возможно).

При использовании относительных путей к файлам, веб-страницы не будут привязаны к вашему текущему базовому URL-адрес. Все ссылки будут работать на вашем собственном компьютере (localhost), а также на вашем текущем общественном домене и вашем будущем публичном домене.

Мы только что запустили
SchoolsW3 видео

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник

Как прописать путь к файлу в HTML?

Наверняка вы уже сталкивались с необходимостью вставки на своём сайте изображений, видео или какого-то файла для скачивания. При решении этой задачи много проблем возникает именно из-за неправильно прописанного пути к файлу. Давайте разбираться как же правильно прописать путь к файлу.

Навигация по статье:

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

Что такое абсолютный путь к файлу?

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

Например, для картинки image.png, которая лежит в папке images на вашем хостинге абсолютный путь будет выглядеть так:

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

Когда вы создаёте HTML страницу на компьютере у вас абсолютный путь будет начинаться не с HTTPS, а с названия диска, на котором этот файл находится. Затем будет идти последовательность папок внутри которых он лежит, а уже потом имя файл и его расширение.

Посмотреть этот путь можно в адресной строке:

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

Как определить абсолютный путь к файлу у себя на хостинге?

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

1. Найти папку, в которой лежат файлы сайта.
Например, в случае с CMS WordPress в ней должны находиться папки «wp-admin», «wp-content» и так далее.

Источник

Как получить путь к файлу из input type=»file»?

IMHO, никак. Доступ к реальной файловой системе из js-скрипта в браузере сильно ограничен. Максимум — получить реальное имя без полного пути и временное служебное имя вида blob:null/8d02a1cb-72bc-4026-a4f7-d5f1c5d08bce.

P.S. Странное имя функции «добавить неудачу».

Вы можете получить имя файла из input.value.

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

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

Например, введите в консоли:

var input = document.createElement('input'); input.setAttribute('type', 'file'); input.setAttribute('webkitdirectory', 'true'); input.addEventListener('change', function() < console.log('Выбраны файлы', input.files); console.log('Пути файлов относительно выбранной папки:'); for (var n = 0; n < input.files.length; n++) < console.log(input.files[n].webkitRelativePath); >>); input.click();

И выберите какую-нибудь папку, где будет хотя бы несколько файлов (любых).

Также при большом желании можно получить путь в виде Data URL — это такой формат адреса, когда файл сам весь целиком помещается непосредственно в адрес (в ссылку). Ниже пример Data URL, попробуйте его открыть:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAOoAAADqAFKWhcCAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAfhQTFRF////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAe7yhUAAAAKd0Uk5TAAECAwQFBgcICQoLDA4PEBESFBYYGRscHR4fICIjJSYnKSosLS8wMTM0Njc8PT5AQUJDRkxNUFJTVFVYWltcX2BhY2RlZmhpa25yc3V2eX1/gIKDhIaIiYqLjI+RlJWXmJmanJ6gpKanqKmtrq+ws7S2t7q7vr/AwsTFxsjKy8zOz9DR0tbX2Nrc3eDh4uTl5ufo6err7e7v8PHy9PX29/j5+vv8/f5wrz1tAAADsklEQVQYGe3BgT+UdxwH8M8dnQ6lzWQzSbnQVNO2ay2ZGqvWFKsZTQptIystWqlLtmWUohRnMi109/k3J8PL6fk9PM/9nu+z7eX9Bv6b0oOnWi8u0XoqmA45vtoIXxOp9UFITi8N9eZAhCdEhZAHEiqoVAEJg1QahIBkmkiG8/JoIg/O20sTe+G8QpoohPOyaSIbzkujiTQ4zxuhUsQLAWNUGoOEASoNQMIdKt2BhE4qdUJCG5XaIKGRSo2QUEOlGkiopFIlJJRTqRwS9lNpPyQUU6kYEvKplA8JWVTKgoQNVNoAETNUmIGMUSqMQsY9KtyDjNtUuA0ZHVTogIwWKrRAxjkqnIOM01Q4DRnHqXAcMg5T4TBk7KPCPmiVWHK5Z+BSZTaW20OFPVguu/LSQM/lkkTYsOsh50SvHfAhRoAKAcTwHbgW5ZyHu2BZ8DkXjdRtxRKZVMjEElvrRrjoeRAWZUwyxo2DSViQQoUULEg6eIMxJjNgTROXC9dvx7wpGprCvO31YS7XBEsSX9DArTI/XnlCQ0/wir/sFg28SIQVARobb9gBoI+G+gDsaBinsQCsCFKpuzw1REOh1PJuKgVhRYAmJsZoaGyCJgKwYv00NZteD0suULMLsCbnJbV6mQOLvqJW1bAqIUSNbibAsuwJajOeBRvKqE0JbGmjJt/Dnk2D1OJ+Kmx6P0INZt6Dbd9Qg5Owb10P43bdizjkTjJO4UzE5XPG6WPEqZ1xaUa83nzMOPQnI24fRmnbVAE0qKdtX0KHpF7a1OmBFnl/0ZbRDGjyBW0JQhdPB21ogD5vjdCy3/3QKEirpvKh1XladAJ6+ftoyXUvNCuYogV/vA3tKmlBCfTz/MxV+wFOyBzjKj3YCEd8wtWJ7IZDvuOq1MApqfe5Cj3r4JiiGa5oMhcOquKKjsJJCTe5gp/grHef0dTTdDislKY+guNaaOI8nLfxAZX6kyFgd4QK04UQ8TUVTkJGYjcNdXkhJOdPGniWBTGf0cCnEPQjX9MKSW884jKDaRD1QZQxIsUQ9i1j1EGa71cu8YsP4t55zEW/pcMFBUOcF0qDKzY1P+Ws4aYUuCa34kS+B2vWrPkf8G4rPdMo6kzpNi8WHQrTBeFD+Mfmq3TJ1c2Y5btL19z1Aaili2qBwghdFClEFV1VhXa6qh1DdNUQhumqYVyhq66gmq6qRlGULooWAWfporMA/P10Tb8fs7Z00SVdWzDHc2yCLpg45sEC384jzRdFNR/Z6cO/wt/U0ZZGPsJ+bAAAAABJRU5ErkJggg==

Источник