Как скачивать файлы изображений, текстовые и другие?
Зачем нужно скрывать полный путь к скачиваемому файлу?
Как сделать, что бы адрес скачиваемого файла не отражался на странице?
Как организовать на сайте платное скачивание?
Иногда возникает необходимость создать какую-то систему, сделать программу для скачивания определённых файлов с вашего сайта. Это могут быть абсолютно любые файлы - изображения, текст, архивы и так далее, главное, что бы пользователь мог их каким-либо образом скачать себе на компьютер.
Как вариант, для размещения файлов можно использовать различные сторонние сервисы, а пользователям просто указывать ссылки на скачивание, но согласитесь, выглядит это не совсем правильно. Раз у вас есть свой сайт, значит все подобные процессы должны происходить именно на нём, без обращения куда либо ещё. Ко всему прочему, организовать контролируемое скачивание (например, на платной основе) намного проще и удобнее на своём сайте, чем со стороннего сервиса.
Сразу стоит отметить: сделать скачивание файлов с сайта абсолютно не сложно, однако понадобиться прописать определённый код, а для этого нужно знать основы HTML и PHP.
Начнём с простого примера.
Создайте на своём сайте папку, в которой будут располагаться файлы для скачивания - это пригодится и в дальнейшем (во всём должен быть порядок!). Назовите её как вам будет удобно, например, my_content .
Создайте на компьютере какой-нибудь файл архива (например, content.zip ) абсолютно с любым содержимым и поместите в эту папку.
Теперь откройте код любой страницы, на которой имеется изображение и сделайте это изображение ссылкой на созданный файл. В результате вы получите что-то типа
<p><a href="/my_content/content.zip"><img src="/images/my_content.png" /></a></p>
Можно даже сразу оформить это как кнопку:
<p><button><a href="/my_content/content.zip"><img src="/images/my_content.png" /></a></button></p>
Сохраните, откройте эту страницу и кликните на изображение. Через 1-2 секунды откроется диалоговое окно с предложением установить (скачать) данный файл на компьютер. Нажмите на ниже расположенную кнопку и убедитесь в этом сами:
Что в результате мы получили?
Картинку, при клике на которую на компьютер пользователя поступает предложение скачать нужный контент. Казалось бы, желаемый результат достигнут, однако не всё так просто! Во-первых, в таком варианте не все типы файлов воспринимаются браузером как объект для скачивания. Во-вторых, адрес скачиваемого файла виден всем пользователям, а это далеко не самый лучший вариант. Рассмотрим всё это по порядку.
Как скачивать файлы изображений, текстовые и другие
Файлы типа .zip браузер сразу же выводит на скачивание, а вот другие будет стараться открыть и/или показать - так уж он устроен. Например, если кликнуть на ссылку с изображением, браузер откроет это изображение, так как это его работа - выводить текст и изображения на страницу. Если кликнуть на файл типа .pdf, то браузер, умеющий работать с такими файлами, откроет и его, но в обоих случаях будет предложено скачать данный файл. Т.е. браузер будет пытаться сначала обработать, открыть указанный файл и только потом предложит его скачать.
А как сделать, что бы браузер не открывал файлы, а сразу предлагал их скачивать? Всё просто: нужно указать в ссылке атрибут download:
<a href="/адрес файла" download>Текст или изображение</a>
Попробуйте перейти по этой кнопке, имеющей стандартную ссылку на файл изображения:
<a href="https://web-development-school.ru/images/foto/japanese-spitz.jpg"> ... </a>
Браузер выведет изображение на экран и предложит его сохранить или напечатать. А теперь попробуйте сделать тоже самое, но с добавленным атрибутом download:
<a href="https://web-development-school.ru/images/foto/japanese-spitz.jpg" download> ... </a>
Если для данного атрибута указать значение, то файл скачается с новым именем (с сохранением расширения):
<a href="/адрес файла" download='новое_имя'>Текст или изображение</a>
Теперь в диалоговом окне вместо изначального файла japanese-spitz.jpg будет предложено скачать файл с именем Японский шпиц.jpg.
Зачем нужно скрывать полный путь к скачиваемому файлу?
Если в выше приведённом примере вы посмотрите код страницы (клавиши + ), то увидите, что адрес скачиваемого файла лежит в открытом доступе. В некоторых браузерах вообще достаточно навести курсор на изображение и внизу отразится соответствующая ссылка. Хорошо это или плохо?
Файл, находящийся в открытом доступе, может скачать кто угодно. Если вы по каким-либо причинам не хотите, что бы это происходило (например, у вас платное скачивание или скачивание только для зарегистрированных пользователей), путь к файлу необходимо скрыть, убрать со страницы. Да и просто не стоит показывать всем какие папки есть на вашем сайте!
Как сделать, что бы адрес скачиваемого файла не отражался на странице?
Основной смысл такой системы скачивания заключается в том, что доступ к требуемому файлу будет иметь не какой-либо элемент на странице (изображение, кнопка), а соответствующий этому элементу скрипт, расположенный на сайте. Проще говоря, кнопка будет запускать скрипт, который в свою очередь выведет на экран диалоговое окно с предложением загрузить выбранный контент на компьютер; соответственно сама кнопка не будет иметь прямого доступа к файлу и путь к нему (адрес) не будет отображаться на странице.
Рассмотрим общую схему такой системы на примере простого компонента для CMS Joomla, ведь в данном случае тип CMS не играет никакого значения: важно понять общий принцип и слегка адаптировать код под свой сайт.
Папка для хранения скачиваемого контента уже создана, поэтому остаётся не забыть запретить к ней доступ в файле robots.txt, находящемуся в корне сайта. Для этого нужно дописать всего одну строку:
Disallow: /ваша папка/
Теперь рассмотрим схему и код работы системы (компонента) для скачивания.
Пользователи CMS Joomla при желании могут установить компонент на свой сайт (кнопка внизу страницы), изучить и использовать по назначению. Перед установкой создайте в папке my_content помимо уже созданного ранее content.zip ещё два файла с любым содержимым (это нужно исключительно для демонстрации работы): content.pdf и content.jpg .
Данный компонент создаёт отдельную страницу, на которую выводятся все скачиваемые файлы (в нашем примере - три). Для каждого создаётся отдельный блок, содержащий изображение, пояснительный текст и кнопку для загрузки. Доступ к этой странице осуществляется через соответствующий пункт в главном меню, например, "Мои изображения", "Загрузки" или что-то в этом роде.
Как вариант, вы можете просто разместить код таких блоков на любой странице независимо от CMS.
Самый простой код каждого такого блока выглядит примерно так:
<!-- Блок 1 -->
<div style='min-height: 270px;'>
<hr>
<div style='float: left; margin-right: 12px;'> <img src='путь к изображению' title='' alt='' /></div>
<h2>Файлы .zip</h2>
<p style="text-align: justify;">Пояснительный текст</p>
<p style='text-align: center;'>
<button name='btn_1' value='on' type='submit' style='background: none; border: none;'>
<img src='путь к изображению на кнопке' title='Скачать' alt='Скачать'>
</button>
</p>
</div>
Как видите, весь блок для удобства заключён в теги <div> ... </div>. Внутри находится изображение, так же помещённое в блок <div> ... </div>, для которого установлено обтекание по правой стороне; соответственно, справа от изображения располагаются название (в виде заголовка) и пояснительный текст. Под текстом находится кнопка, которая при клике отправляет на сервер значение в виде пары имя_кнопки -> значение ('btn_1 -> 'on'). Какое именно значение будет отправлено роли не играет, важно какой кнопкой это сделано, т.е. её имя. Не сложно догадаться, что для второго блока кнопка будет иметь имя btn_2, для третьего - btn_3 и так далее.
Соответственно, все блоки находятся внутри формы, указывающей параметры отправления данных на сервер:
<form name="form_my_cont" method="post" action="index.php?option=com_my_content&view=my_content&task=download" enctype="multipart/form-data">
...
</form>
где в action указан адрес обработчика формы.
При клике на любую кнопку форма отправит на сервер соответствующие данные методом POST. При поступлении запроса контроллер компонента перенаправит эти данные файлу обработчика формы ext_download.php , находящемуся в папке process (для других CMS схема может немного отличаться, но суть остаётся прежней).
Что же сделает обработчик при поступлении запроса? Ничего сложного! Рассмотрим детально его код, но для начала условимся, что на выше созданной странице существуют три кнопки - btn_1, btn_2 и btn_3, позволяющие отправить файлы content.zip, content.pdf и content.jpg соответственно.
<?php
defined('_JEXEC') or die('Restricted access');
if (isset($_POST['btn_1'])){
$file = $_SERVER['DOCUMENT_ROOT'] . '/my_content/content.zip';
$fyles_type = '.zip';
} elseif (isset($_POST['btn_2'])){
$file = $_SERVER['DOCUMENT_ROOT'] . '/my_content/content.pdf';
$fyles_type = '.pdf';
} elseif (isset($_POST['btn_3'])){
$file = $_SERVER['DOCUMENT_ROOT'] . '/my_content/content.jpg';
$fyles_type = '.jpg';
}
if (file_exists($file)) {
header('Content-Description: File Transfer');
header('Content-Type: application/' . $fyles_type);
header('Content-Disposition: attachment; filename="'.basename($file).'"');
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
header('Content-Length: ' . filesize($file));
readfile($file);
exit;
}
?>
В начале при помощи конструкции if/elseif в зависимости от наличия переменной $_POST['имя кнопки'] переменным $file и $file_type присваивается имя и тип запрашиваемого файла соответственно.
Особое внимание нужно уделить адресу файла, а точнее - пути к нему. Из-за особенностей работы функции readfile() указать адрес в виде "чистого" URL нельзя: система просто не сработает; поэтому проще всего воспользоваться переменной $_SERVER['DOCUMENT_ROOT'] или (для CMS Joomla) JPATH_BASE.
Далее если указанный файл существует передаются соответствующие заголовки header, которые дают команду браузеру создать диалоговое окно загрузки и предложить пользователю загрузить файл с определённым именем; за это отвечает строка
header('Content-Disposition: attachment; filename="'.basename($file).'"');
Обратите внимание: в данном случае функция basename подставляет тоже имя, которое есть у исходного файла. Если по каким-то причинам вы хотите это имя заменить, то вместо данной конструкции пропишите соответствующее имя с указанием того же расширения.
В конце функция readfile($file) считывает исходный файл и помещает его в буфер обмена.
Так же обратите внимание на завершающую команду exit: без неё система выдаст ошибку!
Всё! Теперь пользователь может без проблем скачать на свой компьютер нужный ему файл. Вот пример вышеописанного кода целиком (для загрузки трёх различных файлов):
Страница загрузок
<!-- Блок 1 -->
<div style='min-height: 270px;'>
<hr>
<div style='float: left; margin-right: 12px;'> <img src='путь к изображению' title='' alt='' /></div>
<h2>Файлы .zip</h2>
<p style="text-align: justify;">Пояснительный текст</p>
<p style='text-align: center;'>
<button name='btn_1' value='on' type='submit' style='background: none; border: none;'>
<img src='путь к изображению на кнопке' title='Скачать' alt='Скачать'>
</button>
</p>
</div><!-- Блок 2 -->
<div style='min-height: 270px;'>
<hr>
<div style='float: left; margin-right: 12px;'> <img src='путь к изображению' title='' alt='' /></div>
<h2>Файлы .zip</h2>
<p style="text-align: justify;">Пояснительный текст</p>
<p style='text-align: center;'>
<button name='btn_2' value='on' type='submit' style='background: none; border: none;'>
<img src='путь к изображению на кнопке' title='Скачать' alt='Скачать'>
</button>
</p>
</div><!-- Блок 3 -->
<div style='min-height: 270px;'>
<hr>
<div style='float: left; margin-right: 12px;'> <img src='путь к изображению' title='' alt='' /></div>
<h2>Файлы .zip</h2>
<p style="text-align: justify;">Пояснительный текст</p>
<p style='text-align: center;'>
<button name='btn_3' value='on' type='submit' style='background: none; border: none;'>
<img src='путь к изображению на кнопке' title='Скачать' alt='Скачать'>
</button>
</p>
</div>
Обработчик формы
<?php
defined('_JEXEC') or die('Restricted access');
if (isset($_POST['btn_1'])){
$file = $_SERVER['DOCUMENT_ROOT'] . '/my_content/content.zip';
$fyles_type = '.zip';
} elseif (isset($_POST['btn_2'])){
$file = $_SERVER['DOCUMENT_ROOT'] . '/my_content/content.pdf';
$fyles_type = '.pdf';
} elseif (isset($_POST['btn_3'])){
$file = $_SERVER['DOCUMENT_ROOT'] . '/my_content/content.jpg';
$fyles_type = '.jpg';
}
if (file_exists($file)) {
header('Content-Description: File Transfer');
header('Content-Type: application/' . $fyles_type);
header('Content-Disposition: attachment; filename="'.basename($file).'"');
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
header('Content-Length: ' . filesize($file));
readfile($file);
exit;
}
?>
Как видите, ничего сложного нет и подобный код можно легко установить на любую CMS.
В следующей статье читайте о том, как сделать платное скачивание с вашего сайта - как всегда, всё подробно и доступным языком. Но если вы ещё не изучили основательно статью про обычное скачивание - настоятельно рекомендуем начать именно с неё, так как тема платного скачивания является её продолжением.
