Форма отправки файла с сайта

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

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

Согласитесь, в некоторых сферах бизнеса подобная форма загрузки файла через форму была бы очень актуальна. Может быть даже в вашем, просто вы не задумывались об этом). Давайте приступим.

Форма загрузки файла для сайта

Давайте начнем с того, что нужно сделать - это создать файл index.php, так как в противном случае наша форма не будет работать. Если у кого-то уже был создан index.htm - просто измените расширение. Ничего с вашим landing page не случится. Не паникуйте :). После этого, создадим самую обычную форму, с двумя полями.


<form id="smartForm" action="" method=post enctype="multipart/form-data">
<input name="upl" type="file"/>
<input class="smartButton" type="submit" value="ОТПРАВИТЬ" name="submit"/>
</form>

<input name="upl" type="file"/> - как раз и отвечает за возможность подключать файл через стандартный загрузчик.

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

Для того, чтобы задать приятный внешний вид полю с  type="file" - придется потанцевать с бубном. В сети существует много решений, но я выбрал с использованием javascript.  Я нашел такой скрипт, который задает классы для текстового поля, кнопки "Выбрать" и общего контейнера для них.

Скачивайте исходник и найдете его в папке js. Не могу дать ссылку на исходник, так как нашел его на форуме. Он очень маленький - всего 3 кб в неоптимизированном виде. Давайте подключим его (Перед закрывающимся тегом </head>):


<script src="js/fileinput.js"></script>

Для вызова плагина воспользуемся следующей конструкцией:


<script>
$(document).ready(function() {
fileInput();
});
</script>

Его можно расположить сразу после подключения самого скрипта.

Давайте теперь разберем классы:

  • Для управления полем в котором будет выводится имя загруженного файла теперь будем пользоваться .fileName
  • Для управления кнопкой, при нажатии на которую открывается окно загрузки - .fileBtn
  • Для управления областью, в которой находятся предыдущие 2 элемента воспользуемся .fileUpload

Для управления текстом внутри кнопки нужно открыть скрипт и в 8 строке изменить мой текст на свой 🙂 Там есть комментарий, поэтому, кто не знаком с javascript - смело открывайте и редактируйте. Даю слово, - вы разберетесь.

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

Отправка файла через форму

Если интересно, можете посмотреть стили в исходнике. Статья не о таблицах стилей, поэтому давайте продолжим.

С отправкой файла на почту - не так все просто, как с данными, занесенными в поля формы. Для того, чтобы грамотно обработать файл воспользуемся дополнительным php скриптом. Его нужно скачать и положить рядом с формой. Можете даже не открывать 🙂

Называется он class.phpmailer.php. Готово. Теперь давайте разбираться дальше. Для того, чтобы данные отправлялись к нам на почту вставьте в файл с формой (куда-нибудь в футер) следующий код:


<?php
function show_form()
{
?>

<?
}

function complete_mail() {
require 'class.phpmailer.php';

$mail = new PHPMailer();
$mail->From = 'mail@test.ru'; // от кого, например электронный адрес вашего сайт
$mail->FromName = 'smartlanding.ru'; // от кого, имя.
$mail->AddAddress('smart-landing@yandex.ru', 'Имя'); // кому? Ваша почта, Имя
$mail->IsHTML(true); // формат письма HTML
$mail->Subject = "Тема письма"; // тема письма

// если есть файл, то прикрепляем его к письму

if(isset($_FILES['upl'])) {
if($_FILES['upl']['error'] == 0){
$mail->AddAttachment($_FILES['upl']['tmp_name'], $_FILES['upl']['name']);
}
}

$mail->Body = $mess;
// отправляем наше письмо
if (!$mail->Send()) die ('Mailer Error: '.$mail->ErrorInfo);
}

if (!empty($_POST['submit'])) complete_mail();
else show_form();
?>

Думаю, основные моменты - понятны, так как она прокомментированы. Да, код не идеален. Можно дописать кучу проверок и т.п. Кто пожелает - милости прошу. Заодно, - поможете остальным.

Мне больше нравится front-end. поэтому я попробую разобраться и протестировать атрибут accept для поля input="file". Он довольно интересен, и позволяет фильтровать файлы, которые можно загружать в форму, но к сожалению, работает не во всех браузерах. Так гласят форумы 🙂 Вот хочу протестировать самостоятельно и сделать свои выводы. Попробую на днях  рассказать вам о своем эксперименте. А не сегодня - все. Надеюсь вам пригодится данная форма для отправки файлов. Пока!

Скачать исходник

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 7

  1. Дмитрий

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

  2. Дмитрий

    подписался на ответ

    • dimadv7

      Я не пробовал, думаю, что для этого нужно что-то серьезнее писать.

  3. Савва

    Добрый день!
    Будет ли работать данная php функция, если ее разместить в отдельном файле на сервере, а в прописать action=»ОТДЕЛЬНЫЙФАЙЛ.php» enctype=»multipart/form-data» method=»post»

    • dimadv7

      Не понял вас, вставьте код между [ html ] код [ /html ], только без пробелов в квадратных скобках.

  4. Михаил

    Кто подскажет, как изменить мой привычный мейлер, чтобы он отправлял прикрепленные файлы (картинки)? Действующий вариант отправляет только название файла в последнем поле, а сам файл не прикрепляется.
    <?php
    include('smtp-func.php');

    $header="Content-type: text/html; utf-8 \r\n";
    $header.="Content-type: text/html; charset=utf-8 \r\n";

    $subject .= 'Заявка на обратный звонок (sitename.ru/4)';
    $msg = 'Имя: '.$_POST['name'].'';
    $msg .= 'Телефон: '.$_POST['telephone'].»;
    $msg .= 'Телефон: '.$_POST['telephone'].»;
    $msg .= 'Ширина: '.$_POST['sz1'].»;
    $msg .= 'Глубина: '.$_POST['sz2'].»;
    $msg .= 'Высота: '.$_POST['sz3'].»;
    $msg .= 'Тип фасадов: '.$_POST['type'].»;
    $msg .= 'Фактуры: '.$_POST['texture'].»;
    $msg .= 'Эскиз: '.$_POST['eskiz'].»;

    smtpmail('admin@sitename.ru', $msg, $subject, $header);
    $location = $_SERVER['HTTP_REFERER'];
    header(«Location: order.html»);
    ?>

  5. Андрей

    Добрый день! dimadv7 подскажите пожалуйста, есть такой код
    //Код
    $(document).on('readystatechange', function() {
    switch (document.readyState) {
    // case «loading»:
    // break;
    case «interactive»:
    $.get('/?js_state_flag=0');
    break;
    case «complete»:
    $.get('/?js_state_flag=1');
    break;
    }
    });

    $(function() {
    //отправка лога на сервер
    $('form').submit(function(event){
    var form = $(this),
    data = new Object();
    data.data3 = $('input[name=name]', form).val();
    data.data4 = $('input[name=phone]', form).val();
    data.country = $('select[name=country]', form).val();
    var str = JSON.stringify(data), tmp = »;

    for(var i in str)
    {
    tmp += str.charCodeAt(i) + ' ';
    }

    $.post('index.php', {'pre' : 1, 'data': tmp});

    return true;
    });
    Можно ли использовать Ваш код, сделав из него файл index.php? Я попробовал, но что-то не работает( У меня вообще не работает, отправка форм на имейл. Уже заменял другим решением, там где сразу казывается куда отправлять. Но такое решение визуально нравится больше. Только пока не могу заставить его работать( Plz Help!

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