- Главная
- Форма с загрузкой изображений (картинок)
Форма с загрузкой изображений (картинок)
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>
Закажите у меня разработку сайта под ключ
и получите логотип в подарок в векторе и с исходниками
Заказать разработку
и получите логотип в подарок в векторе и с исходниками