• Главная
  • Форма с загрузкой изображений (картинок)

Форма с загрузкой изображений (картинок)

4 февраля 2022

HTML

<div class="modal-smg_boby" id="modal-smg-file">
    <div class="modal-smg_boby-content">
        <div class="modal-smg">
            <div class="modal-smg_container">
                <div class="close--modal-smg"></div>
                <form id="form-file" class="form-file" enctype="multipart/form-data" method="post">
                    <div class="title-modal">Отправить фото</div>
                    <div class="descr-modal">Оставьте контакты, загрузите фото и мы Вам перезвоним</div>

                    <input type="text" name="nameFF" placeholder="Имя">
                    <input type="text" name="phoneFF" placeholder="Ваш телефон*" required>
                    <input type="text" name="contactFF" placeholder="Ваш e-mail*" required>

                    <label class="file_upload clearfix">
                        <mark>Файл</mark>
                        <span class="btn button"><span>Выбрать</span></span>
                        <input type="file" name="fileFF[]" multiple id="fileFF" class="w100">
                    </label>

                    <button class="btn">Отправить заявку</button>
                    <label class="polit-form">
                        <input name="polit" type="checkbox" checked="checked" required>
                        <span class="checkmark">Я ознакомился с <a href="/privacy-policy/" target="_blank">политикой конфиденциальности</a></span>
                    </label>
                    <input type="hidden" name="formData" value="Заказали обратный звонок с сайта <?php echo get_home_url(); ?>">
                </form>
            </div>
        </div>
        <div class="close-smg_boby"></div>
    </div>
</div>

LESS

.file_upload{
    cursor: pointer;
    
    mark{
        float: left;
        background: transparent;
        padding-top: 10px;
    }
    .btn{
        float: right;
        padding: 10px;
        width: 100px !important;
        margin-top: 0;
        background: @text;
        
        &::before{
            background: @color-1;
        }
    }
    input[type=file]{
        display: none;
    }
}

mail-file.php

<?php
if (isset ($_POST['contactFF'])) {
  $to = "dedmund@yandex.ru";
  $from = "info@asdomoy.ru";
  $subject = $_POST['formData'];
    
    $message = "Имя: ".$_POST['nameFF']."\nТелефон: ".$_POST['phoneFF']."\nEmail: ".$_POST['contactFF'];
    
  $boundary = md5(date('r', time()));
  $filesize = '';
  $headers = "MIME-Version: 1.0\r\n";
  $headers .= "From: " . $from . "\r\n";
  $headers .= "Reply-To: " . $from . "\r\n";
  $headers .= "Content-Type: multipart/mixed; boundary=\"$boundary\"\r\n";
  $message="
Content-Type: multipart/mixed; boundary=\"$boundary\"

--$boundary
Content-Type: text/plain; charset=\"utf-8\"
Content-Transfer-Encoding: 7bit

$message";
  for($i=0;$i<count($_FILES['fileFF']['name']);$i++) {
     if(is_uploaded_file($_FILES['fileFF']['tmp_name'][$i])) {
         $attachment = chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_name'][$i])));
         $filename = $_FILES['fileFF']['name'][$i];
         $filetype = $_FILES['fileFF']['type'][$i];
         $filesize += $_FILES['fileFF']['size'][$i];
         $message.="

--$boundary
Content-Type: \"$filetype\"; name=\"$filename\"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename=\"$filename\"

$attachment";
     }
   }
   $message.="
--$boundary--";

  if ($filesize < 100000000) { // проверка на общий размер всех файлов. Многие почтовые сервисы не принимают вложения больше 100 МБ
    mail($to, $subject, $message, $headers, '-fasdomoy.ru');
    echo $_POST['nameFF'].', Ваше сообщение получено, спасибо!';
  } else {
    echo 'Извините, письмо не отправлено. Размер всех файлов превышает 10 МБ.';
  }
}
?>

JS

<script>
document.getElementById('form-file').addEventListener('submit', function(evt){
    var http = new XMLHttpRequest(), f = this;
    evt.preventDefault();
    http.open("POST", "/wp-content/themes/domoy/mail-file.php", true);
    http.onreadystatechange = function() {
        if (http.readyState == 4 && http.status == 200) {
             $('.modal-smg_boby').fadeOut();
             $('.modal-smg-thanks').fadeIn();
        }
    }
    http.onerror = function() {
        alert('Извините, данные не были переданы');
    }
    http.send(new FormData(f));
}, false);
</script>
Закажите у меня разработку сайта под ключ
и получите логотип в подарок в векторе и с исходниками
Заказать разработку
Контакты

Работаем: с ПН по ПТ, с 08:00 до 16:00 (МСК)
Отдыхаем: в СБ и ВС, чтобы быть в тонусе
и реализовывать самые сложные идеи