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

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

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

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

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

Давайте начнем с того, что нужно сделать - это создать файл 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". Он довольно интересен, и позволяет фильтровать файлы, которые можно загружать в форму, но к сожалению, работает не во всех браузерах. Так гласят форумы :) Вот хочу протестировать самостоятельно и сделать свои выводы. Попробую на днях  рассказать вам о своем эксперименте. А не сегодня - все. Надеюсь вам пригодится данная форма для отправки файлов. Пока!

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

16 комментариев

  1. Дмитрий

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

  2. Дмитрий

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

    1. dimadv7

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

  3. Савва

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

    1. 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!

  6. Shuher

    Доброго времени суток! Дима кпк сделать форму типа подписки? Чтобы после ввода почты и нажатия кнопки, подписчик получал файл PDF на указанную почту. Спасибо большое! Всегда выручаете!

    1. dimadv7

      Пока не разбирался с этим вопросом. Не в курсе как это делается.

  7. Евгений
    $recepient = " ";
    $sitename = " ";
    
    $regions = trim($_POST["regions"]);
    $company_name = trim($_POST["company_name"]);
    $inn = trim($_POST["inn"]);
    $web = trim($_POST["web"]);
    $phone = trim($_POST["phone"]);
    $mail = trim($_POST["mail"]);
    $stock_1 = trim($_POST["stock_1"]);
    $stock_2 = trim($_POST["stock_2"]);
    $stock_3 = trim($_POST["stock_3"]);
    $stock_4 = trim($_POST["stock_4"]);
    $assort_count = trim($_POST["assort_count"]);
    $speccom = ''; //checkbox
    if (empty($_POST["speccom"]))
    {
        $speccom = "Специализация не выбрана";
    }
    elseif (!empty($_POST["speccom"]) && is_array($_POST["speccom"]))
    {
        $speccom = implode(" ", $_POST["speccom"]);
    }
    
    $rival = trim($_POST["rival"]);
    
    $delivstat = ''; //checkbox
    if (empty($_POST["delivstat"]))
    {
        $delivstat = "Текущий статус в цепочке поставок не выбран";
    }
    elseif (!empty($_POST["delivstat"]) && is_array($_POST["delivstat"]))
    {
        $delivstat = implode(" ", $_POST["delivstat"]);
    }
    
    $otsrochka_platezha = trim($_POST["otsrochka_platezha"]);
    $min_partia = trim($_POST["min_partia"]);
    $nalog_sys = trim($_POST["nalog_sys"]);
    $del_syst = trim($_POST["del_syst"]);
    $term_period_del = trim($_POST["term_period_del"]);
    $daily_info = trim($_POST["daily_info"]);
    $return_warranty = trim($_POST["return_warranty"]);
    $warehouse_condition = trim($_POST["warehouse_condition"]);
    
    $message = "
    Регион: $regions 
    \nНазвание вашей компании: $company_name
    \nИНН: $inn
    \nАдрес официального сайта: $web
    \nТелефон/Факс: $phone
    \nEmail: $mail
    \nАдрес склада: $stock_1
    \n$stock_2
    \n$stock_3
    \n$stock_4
    \nАссортимент (количество артикулов): $assort_count
    \nСпециализация компании: $speccom
    \nОсновные бренды конкуренты: $rival
    \nТекущий статус в цепочке поставок: $delivstat
    \nОтсрочка платежа: $otsrochka_platezha
    \nМинимальная партия: $min_partia
    \nСистема налогообложения: $nalog_sys
    \nСпособы доставки: $del_syst
    \nСпособы доставки: $term_period_del
    \nВозможность ежедневного информирования: $daily_info
    \nВозврат и гарантийное обслуживание продукции: $return_warranty
    \nСостояние склада: вложение";
    
    
    
    $pagetitle = "Новая заявка с сайта \"$sitename\"";
    mail($recepient, $pagetitle, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: $recepient");

    Добрый день! У меня отправщик прописан немного по другому как мне добавить прикрепленный файл?

  8. Агата

    Отправляю вложение, а письмо не приходит на почту, что делать? (указала адрес куда должно придти письмо)

  9. Дима

    censor censor пост, админ. Комменты игнорирует, прописать доп поле кроме файлового - censor надо. censor отношение)

    1. dimadv7

      Дима, заходи сюда)))

  10. Аза

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

  11. ypofafun

    В результате трудоустройства необходимо изучить особенности, возникающие при прохождении собеседования. Условия для кандидатов на перспективные вакансии часто пересматриваются. Когда у кандидата есть сертификат учебного заведения или техникума, увеличивается возможность узнать вердикт после собеседования. Это приводит к формированию традиции поступать в институт после окончания школы. Цена за образование высока. Переезд не позволяет путешественникам получать корочки традиционным способом. Наша организация работает для клиентов, как если бы каждый мог заказать документ в твери. Учеба в университете очень растянута. В дополнение к адаптациям, которые необходимы для будущей карьеры, студенты вынуждены изучать дисциплины смежных специальностей. Покупка этого сертификата в твери помогает эффективно распределять время, осваивая информацию, которая определяет результат в интересующей отрасли. Уровень образования, полученного в школе или институте, заметно падает из года в год. Игры не меняются, и другие профессии преподаются по методикам, разработанным в советском союзе. На тему того, насколько опытными будут студенты после окончания учебы в следующих системах, даже с дипломом колледжа или колледжа, не следует упоминать. Если купить корочку в твери, то есть возможность улучшить развитие, а затем и трудоустройство. Учителей больше интересует возможность заработать деньги для студентов, но не качество отправляемых данных. Количество практических занятий минимально, поэтому выпускники мыслят исключительно в плоскости изучаемой теории. Работодатели предполагают, что некоторые претенденты на вакантные должности не прошли необходимый уровень. Поэтому нового сотрудника отправляют на стажировку. Но документ о среднем специальном образовании необходим заявителю для того, чтобы получить возможность проявить профессиональные качества. По окончании университета мировоззрение меняется. Человек совершенствует навыки, расширяет знания, чтобы быть специалистом. В дополнение к шести годам, проведенным в помещениях института для получения сертификата, вам придется потратить месяцы на повышение своей квалификации. Такой доступ к использованию времени выглядит нерациональным. Корочка, купленная на нашем ресурсе, купить диплом http://gosdiplomy.com/ Выдается за один день. Наши мастера накопили довольно много навыков и способны быстро выполнять задания разного уровня сложности. Способ, которым документ был выдан в твери, останется в секрете от 3 человек. Сохранение конфиденциальности информации вашего клиента остается едва ли не ключевым правилом работы. Анализ ситуации делает очевидным, что покупка красного сертификата специалиста или эксперта - единственно возможный вариант выполнить установку качественно в срок. Клиенты нашего агентства имеют возможность оформить документацию любого вуза. Чтобы соблюдать это правило, вам необходимо подать заявку на ресурсе. Выбор специальности ограничен исключительно желанием покупателя. Готовые дипломы современных и ретро образцов доставляются курьерами компании, а расчет принимается по окончании аудита. Те, кто хотел применить свой опыт и знания по прямому назначению, уже смогли заказать сертификат во в твери. Сейчас они закрепляются в руководстве и находятся в достатке.

  12. inekok

    Сегодняшний темп жизни заставляет нас ценить время, жертвуя многим для достижения наших целей. Некоторые люди ранее были вынуждены бросить университет и настроиться на зарабатывание денег. Однако проходят годы, а желаемого продвижения по службе все еще нет. Что именно делать, когда нет времени на учебу, а корочка является главным препятствием на пути к заветной должности? Есть решение. Все больше и больше специалистов в различных областях, имеющих необходимый опыт, решают купить сертификат о высшем образовании и получить карьерный рост в короткие сроки. По какой причине и вы не знаете, чтобы не прибегать к такой возможности? Да, вы можете взять онлайн-кредит и восстановиться, чтобы учиться в заброшенном университете. Синтез зарабатывания на жизнь заочным образованием, оплаты поездок в иногородний институт, проживания в общежитии, прослушивания устаревших шаблонных лекций, споров с преподавателями об актуальности информации. Значительный практический опыт часто несовместим с теоретическими знаниями, которые преподаются в университетах. Ваше начальство понимает это и ценит вашу жизнь, к счастью, последние требования таковы - управление недоступно при отсутствии сертификата. Где взять столь необходимый кусок пластика? Как не угодить "фондам и сохранить старую репутацию в офисном здании? Ответ лежит на поверхности: необходимо приобрести сертификат о высшем образовании у надежной компании. В нашем магазине вы можете найти фотографию образца документа, а также внимательно изучить его. Законная корочка имеет право иметь: - Государственный герб; - серийный номер; - четкие штампы и подпись ректора университета; - вся информация должна быть свободна от грамматических и стилистических ошибок; - оригинальная форма установленного образца гознака. Не каждый из нас вникал в тонкости проверки дипломов, поэтому, пожалуйста, подумайте: надежность компании, насколько она честна, как долго она работает в этом секторе, есть ли в израиле сертификационные документы. Наша компания советует нашу помощь в производстве корочек различных специальностей, желаемую дату выпуска с хорошей характеристикой, с помощью оптимальных цен. На ресурсе вы найдете:, подробная информация о планах производства, тестирования или комментарии довольных клиентов. Многолетний опыт, посещение оригинальных форм и тесное партнерство с университетами страны позволяют нам обещать клиентам такие времена. 1. Этот документ специалиста. Даже когда вы учились в 1985 году и университет был давно расформирован, мы преодолеем трудности. Вы получите нужный документ с требуемыми датами выпуска. 2. Достоверность необходимой информации. Мы предоставим технические условия в абсолютном соответствии с правилами современного времени "выдачи". Лист вставки изготовлен, купить диплом gosdiplomy.com С учетом пожеланий. 3. Оригинальные бланки гознака. Дипломы находятся в утвержденных общепринятых стандартах (голограммы, штампы, автографы, государственный герб).

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