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

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

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

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

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

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

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

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

  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. ogeresak

    Онлайн-кредиты помогают многим займ на именную карту Россиянам. Получить средства от микрофинансовой организации можно всего за несколько минут. При этом вам не нужно идти в компанию или получать список документации. Бывает, что для решения денежных проблем не хватает одного кредита. Стоит ли подписывать два или более договоров одновременно в любой микрофинансовой компании? Мфк не предоставляет финансовых возможностей физическим лицам, которые недавно открыли кредитный счет. Более того, если клиент уже взял 10 кредитов в прошлом году, микрофинансовые компании не одобрят следующую заявку. Однако это делается только для тех кредитов, которые были выданы сроком на 7 месяцев. Продлите кредит наличными или подумайте о новом? Если заемщик не в состоянии погасить кредит в срок, он может воспользоваться правом на наше продление. Например, в pay p. S. Вы можете продлить контракт не более чем в 10 раз. Продление кредита осуществляется бесплатно. Чтобы воспользоваться помощью, вам нужно погасить 10% кредита и выплатить все накопленные проценты. Если ролловер был включен, дополнительные наценки не взимаются, просрочка не возникает, и кредитная история не страдает. Можно продлить кредит-это более привлекательно, чем выдавать новый микрокредит нужной фирме для того, чтобы выдать кредит. Когда вам нужен второй микрозайм Но иногда вам все равно нужно получить дополнительный кредит. В такой ситуации pay p. S пойдет вам навстречу. Эта мфк закрывает глаза на наличие других кредитных счетов. У клиента есть высокие перспективы для одобрения кредита, если он уже задолжал другой фирме. Кроме того, pay p. S. Не спрашивает о цели кредита и не нуждается в предоставлении документа о платежеспособности. Любой гражданин россии, достигший совершеннолетия с паспортом и регистрацией договора, может получить небольшой кредит. Обязательно иметь высокий доход и проживать по адресу регистрации. Ответьте на любые вопросы в телефонном разговоре: 8 800 555 2435.

  12. ilikune

    Требуется ли для обучения подлинный документ Купить дипломы в Иркутске http://diplom-site.com/diplom-v-irkutske/ От университета инновационного типа? Документ университета или техникума? Стать владельцем документа образовательного учреждения в наше время несложно, если вы возьмете эту услугу в качестве партнера. Здесь вы найдете документы института на бланки инновационного типа следующего года, заполненные в соответствии со всеми требованиями и условиями установленного образца. При продаже документов мы используем бланки гознака, поэтому готовы предложить вам сертификаты любых вузов российской федерации и ссср. Узнайте, во сколько вам обойдется сертификат vo - price Стоимость ценных бумаг, доставленных вами о во - Преимущества, которые вы получаете, прибегая к этим здесь: - Готовим качественные работы; мы следим за каждой деталью, чтобы украинские корочки абсолютно соответствовали перечню предметов во вставках и фресках преподавательского состава. - Оплата при предъявлении справки об окончании курса в вузе (университете, институте) производится сразу после получения заявления. Наша компания не требует предоплаты. Игроки имеют право подробно ознакомиться с документацией и, убедившись, что партнер подходит для полной программы%, оплатить товар. - Оплата производится во время получения запроса, без предварительной оплаты. Вы получите возможность ознакомиться с дипломом-и только потом сделаете выбор - брать его или нет. - Это займет максимум несколько дней, а затем интересующий вас документ будет доступен. Дипломы, которые когда-то интересовали клиентов Купить сертификат Колледж (техникум) Купить медицинские дипломы Получить диплом фармацевта Свидетельство о праве собственности на продажу Продажа медицинского диплома Часто люди хотят найти способ получить диплом о специальном образовании (университет, институт, вуз) быстро и с минимальными затратами. Обычно речь идет об очень специфических школах. Например: рудн, мгу, мфу, мгсу, рггу, мгимо, гуу, мади, маи, ранхигс, ифпа, витте, миит, рггу, мэи, мэси, сга, мти, мгуту, митт. На первый взгляд, крайне сложно приобрести подлинный документ в 1-м из таких учреждений? Нет! Мы упростили систему работы, чтобы любой из этих клиентов получил именно то, что хотел! С компанией "мскдип" вы можете предоставить себе документы любой специальности, мы имеем в виду инженера или механика, техника или технолога. Мы продаем корочки слесарей, строителей, электриков или мельников. Если вы давно хорошо разбираетесь в бизнесе и работаете очень просто, корочка подтвердит вашу квалификацию юриста или бухгалтера, менеджера, маркетолога, логиста или экономиста. Перестаньте тратить драгоценное время, просто позвоните, чтобы получить документ о том, что вы являетесь переводчиком, программистом или инженером. Даже такие специалисты, как бухгалтер, парикмахер, повар или косметолог, сегодня нуждаются в корочке-и наши специалисты предоставят вам необходимые сопутствующие товары. И здесь вы можете установить документы на реальные бумаги агронома, товароведа, дизайнера, эколога, психолога или учителя. Даже врач или ветеринар хочет получить сертификат сертификации.

  13. unavugar

    Слайд-тв-шоу из фотокарточек и видео на свадьбу, день рождения или другой праздник. Вы ищете подарок на день рождения для своего мужа, жены, отца, матери или другого сотрудника? Хотите выразить свою благодарность и торжественно поздравить юбиляра таким образом, чтобы этот подарок запомнился всем этим на ближайшие несколько лет? Вы хотите, чтобы подписчик стал искренним и передал частичку вашей любви в их силах? Нужно ли красиво напоминать юбиляру о самых счастливых моментах реальности в настоящем подарке, чтобы улучшить его настроение? Вы ответили "да"? При таких обстоятельствах нажмите на видеостудию "мосфильм", чтобы получить искреннее слайд-шоу на памятную дату и день рождения. Спешите посмотреть файл поздравления с круглой датой и с днем рождения! Когда вы выбрали эту короткую статью и хотите получить более подробную информацию о заказать поздравление от звезды I, я прошу всех пользователей посетить этот портал.

  14. ohaxasyp

    Наша организация предоставляет возможность приобрести поддельный сертификат о высшем и среднем образовании в купить диплом http://diplom-site.com/ Санкт-петербурге. Практически диплом может открыть дверь в прекрасную жизнь. Даже если отправитель обладает соответствующими навыками и знаниями, которыми должен обладать специалист, то окружающие вас люди вообще не смогут слушать при отсутствии сертификата во. Часто бывает так, что работодателей волнует только наличие такого документа, но не конкретная профессия соискателя. Печать и подпись в определенном документе-это для того, чтобы человек был образованным, разносторонним, а главное, чтобы такой велосипед обладал базовыми знаниями. Где в следующем будут наложены другие, полученные им уже во время занятия каждой компании, если, но не по профилю. Наличие поддельного документа о высшем или среднем образовании значительно повышает вероятность успешного трудоустройства. Огромное количество работодателей на собеседовании интересуются этим вопросом. Ведь всегда престижно иметь квалифицированного специалиста в этом штате. Если вы купите поддельный документ в нашей компании, то мы гарантируем, что после собеседования нас на 100% примут на стажировку. И не за горами, у пользователя будет хорошая возможность продемонстрировать собственные знания. И если вы являетесь ярым специалистом, то наша компания гарантирует, что вы получите достойные результаты. Купить сертификат у хакеров в санкт-петербурге, петербург Мы предлагаем такие услуги уже много лет и рады, что имеем только положительные отзывы благодарных потребителей. Этому способствует отличный уровень профессионального мастерства в процессе выполнения заказа, что позволяет безопасно предоставить сертификат каждому экземпляру: - Он выполнен на бланке с удобными знаками утвержденного типа; - имеет все необходимые символы, штампы, рисунки, голографические знаки, микротексты; - имеет собственный серийный номер. При этом соблюдаются особенности, принятые при оформлении диплома в таком колледже. Для того, чтобы приобрести поддельный документ института в санкт-петербурге или техникума в этой компании, вам не понадобится несколько часов: достаточно нажать на портал и сделать простую заявку. Ведь сотрудник свяжется с вами и выяснит все детали заявки, сможет ответить на темы, требующие удовлетворения, и вопросы, касающиеся порядка денежных взносов и транспортировки.

  15. aficas

    Мы никогда не ограничиваемся объяснением того, как создать слайд-шоу для вечеринки по случаю дня рождения. Есть слишком много причин поздравить тех, кто живет в вашем сердце, родственников и друзей: рождество, юбилейные торжества, окончание школы или университета, 23 февраля и международный женский день. И почему бы вместо банальной открытки не устроить слайд-презентацию в подарок из картинок и видеороликов о самых крутых моментах, проведенных вместе? Чтобы создать слайд-телепрограмму из фотографий, просто отправьте видео и красивую звуковую дорожку в проект слайд-шоу movavi, соедините кадры красивыми клеями, вставьте заголовки с предложением общения или стихами, видеопоздравления от звезд И ваш фильм готов! Загрузите свою рекламу в интернет или просто покажите теги темы, для кого она была создана - ваш муж, подруга, мать или кто-то еще, несомненно, оценит ваше праздничное слайд-шоу!

  16. yhimase

    В стране уже полно таких задач в социальной сети - читайте их... Получается, что в отношении первого октября недавно начавшегося года нерезиденты россии должны переводить или выводить какую-либо собственную кровь wmr, пайпал войти В противном случае нерезидентам россии теперь придется лично ехать в нашу страну и просматривать рублевый счет, чтобы вывести собственную кровь. И что теперь нерезиденты могут сделать с wmr? Каковы сейчас возможности клиента? Вот все же примерно смогу построить и выложить... Я задал вопрос по простым вопросам... 1.Открывайте ранее недоступные wmp кошельки или это лишнее, эти кошельки будут создаваться автоматически, так как, например, я сейчас через webmoney keeper не могу установить свежие wmp средства – абсолютно, так что я не гражданин рф, я тем более не могу открыть рублевый счет в российском банке, вот конкретно в этом и вся проблема, вот как это объяснить, я написал, что с точки зрения webmoney, это попахивает ммм-мавроди, в другой ситуации нужно было все подробно описать, как это происходит для нерезидентов россии, кошельки.

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

 

© 2014 — 2021, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности