Кнопка прикрепить файл HTML

Кнопка прикрепить файл HTML

Классы CSS для описанных выше компонентов

Приведенные ниже стили CSS играют основную роль в настройке input type file стилизации. С помощью CSS мы делаем три вещи:

  • Скрываем сам элемент ввода с помощью класса file_input_hidden;
  • Настраиваем кнопку выбора файла с помощью класса file_input_button и добавляем к ней эффект наведения, используя класс file_input_button_hover;
  • Настраиваем свойства текстового поля, используя класс file_input_textbox:

<style type=»text/css»> .file_input_textbox {height:25px; width:200px; float:left; } .file_input_div {position: relative; width:80px; height:26px; overflow: hidden; } .file_input_button {width: 80px; position:absolute; top:0px; border:1px solid #F0F0EE;padding:2px 8px 2px 8px; font-weight:bold; height:25px; margin:0px; margin-right:5px; } .file_input_button_hover{width:80px;position:absolute;top:0px; border:1px solid #0A246A; background-color:#B2BBD0;padding:2px 8px 2px 8px; height:25px; margin:0px; font-weight:bold; margin-right:5px; } .file_input_hidden {font-size:45px;position:absolute;right:0px;top:0px;cursor:pointer; opacity:0; filter:alpha(opacity=0); -ms-filter:»alpha(opacity=0)»; -khtml-opacity:0; -moz-opacity:0; } </style>

Вы можете внести следующие изменения в CSS:

  • Изменить размер текстового поля и кнопки;
  • Изменить цвет фона кнопки, а также фоновое изображение;
  • Увеличить текстовое поле и кнопку, изменить / удалить их границу;
  • Изменить внешний вид html input type file, добавляя / удаляя CSS-код для конкретного браузера.

JQuery-код для добавления / удаления классов CSS при событии mouseover

Можно поместить код пользовательской проверки в следующий код JQuery.

Например, для события hange(), мы заменяем префикс fakepath, который применяется браузером Google Chrome:

<script type=»text/javascript» src=»jquery-1.8.2.min.js»></script> <script type=»text/javascript»> $(document).ready(function() { $(‘.file_input_button’).mouseover(function(){ $(this).addClass(‘file_input_button_hover’); }); $(‘.file_input_button’).mouseout(function(){ $(this).removeClass(‘file_input_button_hover’); }); $(‘.file_input_hidden’).change(function(){ var fileInputVal = $(this).val(); fileInputVal = fileInputVal.replace(«C:fakepath», «»); $(this).parent().prev().val(fileInputVal); }); }); </script>

Примеры:

Добавьте приведенный выше код оформления input type file в разметку страницы и проверьте его в браузерах. Мы протестировали его в Firefox и Google Chrome.

Не забудьте поместить jquery-1.8.2.min.js в ту же папку, где располагается html-файл. Или можно загрузить JQuery с помощью Google CDN.

С помощью настройки элементов интерфейса через CSS можно сделать поле загрузки файла таким:

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

Исходные файлы текущей статьи вы можете скачать по .

Начнем с создания формы, в которой будет присутствовать поле для загрузки файла. На что здесь стоит обратить внимание? Во-первых, поле для отправки файла должно иметь специальный тип – type=»file». Во-вторых, файл может быть отправлен только в теле запроса, поэтому метод GET для отправки формы не подойдет, нужно использовать только метод POST — method=»post». Ну и, в-третьих, для формы необходим специальный атрибут enctype с определенным значением — enctype=»multipart/form-data». Без этого атрибута файл просто не будет отправлен.

Исходя из озвученного выше, наш код будет примерно таким:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

В результате мы получим примерно такую форму:

Поле для загрузки файлов выглядит не очень привлекательно, но, тем не менее, со своей задачей справится без проблем: файл можно прикрепить и отправить на сервер. В следующей статье мы попробуем красиво оформить поле для загрузки файла, а пока давайте проверим, загружается ли файл. Как видим, форма будет отправлена в файл file.php, который указан в атрибуте action. Давайте создадим этот файл:

1 2 3 4 <?php echo ‘<pre>’; print_r($_POST); print_r($_FILES);

А вот и результат:

Как видим, файл успешно отправлен на сервер и доступен он в массиве $_FILES, именно оттуда необходимо обращаться на сервере к загружаемому файлу. Подробнее о работе с загруженным файлом вы можете прочесть в статье Загрузка изображений на сервер. Ну а на этом наша статья завершена. В следующей статье мы попробуем красиво оформить кнопку загрузки файла на сервер.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

>Разработка веб-приложения на PHP

Создайте веб-приложение на PHP на примере приема платежей на сайте

Получить

Html формы с полем отправки файла

Html формы с полем отправки файла представлен ниже. При клике по кнопке «browse» пользователь получает возможность выбрать файл на своей локальной машине.

HTML

<form method=»POST» name=»email_form_with_php» action=»php-form-action.php» enctype=»multipart/form-data»> <label for=’name’>Имя: </label> <input type=»text» name=»name» id=»name» > <label for=’email’>Email: </label> <input type=»text» name=»email» id=»email» > <label for=’message’>Message:</label> <textarea name=»message» id=»message» ></textarea> <label for=’uploaded_file’>Выберите файл для загрузки :</label> <input type=»file» name=»uploaded_file» id=»uploaded_file» > <input type=»submit» value=»Submit» name=’submit’> </form>

Форма будет выглядеть следующим образом:

Обратите внимание, что в атрибутах формы мы указали enctype=»multipart/form-data». Это скажет браузеру, что форма может быть использована для отправки файлов. Также мы добавили поля «name» и «email» с целью собрать как можно больше информации о пользователе. Затем идет поле отправки файла.

<label for=’uploaded_file’>Выберите файл для загрузки :</label>

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

Получаем информацию о загруженном файле

Сперва мы проверим полученные данные, затем, в случае успешной проверки, отправим данные на электронную почту.

Всю информацию о загруженных файлах можно получить при помощи массива $_FILES.

Содержимое массива $_FILES для нашего примера приведено ниже. Обратите внимание, что значение атрибута name (у нас оно равно uploaded_file) в поле выбора файла может быть любым.

  • $_FILES
    Оригинальное имя файла на компьютере пользователя.
  • $_FILES
    Mime-тип файла, в случае, если браузер предоставил такую информацию. Пример: «image/gif». Этот mime-тип не проверяется в PHP, так что не полагайтесь на его значение без проверки.
  • $_FILES
    Размер в байтах принятого файла.
  • $_FILES
    Временное имя, с которым принятый файл был сохранен на сервере.
  • $_FILES
    Код ошибки, которая может возникнуть при загрузке файла. Этот элемент был добавлен в PHP 4.2.0

Получаем имя, тип и размер загруженного файла:

//Получаем последний компонеет имени загруженного файла $name_of_uploaded_file = basename($_FILES); // например, index.php //получаем расширение файла (без точки) $type_of_uploaded_file = substr($name_of_uploaded_file, // позиция вхождения точки + 1 strrpos($name_of_uploaded_file, ‘.’) + 1); $size_of_uploaded_file = $_FILES/1024; //размер в KBs

Как видите, информация о загруженном файле доступна через массив $_FILES.

Проверяем размер и тип расширения загруженного файла

Предположим, что получаемый файл должен быть изображением («jpg», «jpeg», «gif», «bmp») и не должен превышать 100 Kb. Тогда наш код будет выглядеть так:

//Настройки $max_allowed_file_size = 100; // размер в KB $allowed_extensions = array(«jpg», «jpeg», «gif», «bmp»); //Проверки if($size_of_uploaded_file > $max_allowed_file_size ) { $errors .= «\n Размер файла должен быть меньше $max_allowed_file_size»; } //—— Проверяем расширение файла —— $allowed_ext = false; for($i=0; $i<sizeof($allowed_extensions); $i++) { // сравниваем строки, если = 0, то строки идентичны (без учета регистра) if(strcasecmp($allowed_extensions,$type_of_uploaded_file) == 0) { $allowed_ext = true; } } if(!$allowed_ext) { $errors .= «\n Расширение файла не соответствует требуемому. «. «Поддерживаются следующие расширения: «.implode(‘,’,$allowed_extensions); }

В вышеприведенном коде мы проверяем размер и тип файла. Максимально допустимый размер файла равен 100 KB ($max_allowed_file_size). Массив $allowed_extensions содержит названия всех допустимых расширений файла. Таким образом, расширение файла проходит проверку на соответствие значениям массива $allowed_extensions. При обнаружении ошибок переменной $error присваивается соответствующая запись.

Отправляем письмо

Составим и отправим письмо на электронную почту администратора сайта (или кому хотите). Для отправки и компоновки письма будем использовать pear library (инструкцию по установке смотрите ниже). Pear классы PEAR::Mail и PEAR::Mail_Mime используются для отправки электронной почты с прикрепленными файлами.

Для начала мы должны подключить файлы pear library для этих классов:

include_once(‘Mail.php’); include_once(‘Mail_Mime/mime.php’);

Ниже приведен код компоновки и отправки письма:

$message = new Mail_mime(); $message->setTXTBody($text); $message->addAttachment($path_of_uploaded_file); $body = $message->get(); $extraheaders = array(«From»=>$from, «Subject»=>$subject,»Reply-To»=>$visitor_email); $headers = $message->headers($extraheaders); $mail = Mail::factory(«mail»); $mail->send($to, $headers, $body);

Класс Mail_mime() поможет в создании MIME послания. В приведенном выше коде мы создали объект Mail_mime, обновили тело письма ($message->setTXTBody($text);) и добавили прикрепленный файл ($message->addAttachment(file)).

Прежде чем использовать классы PEAR необходимо установить PEAR на вашем сервере. Вот быстрый способ установить PEAR:
Скачайте инсталлятор PEAR
http://pear.php.net/go-pear
Сохраните файл как «pear-installer.php». Загрузите этот файл на ваш сервер в любой каталог. Затем пропишите путь к файлу в вашем браузере:
http://www.yourdomain.com/pear-installer.php
Появится веб-интерфейс для установки PEAR на вашем сайте. Следуйте инструкции по установке. После установки Pear, найдите и установите пакеты «mail» и «mail_mime».

>Простая форма с загрузкой, скачать

Архив содержит простую форму с отправкой загруженного файла на почту.


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

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