Данные примеры не стоит тупо копировать, это примеры с зависимостью Bootstrap 4
Форма может быть любой
<form method="POST" action="#" name="uploadZakaz" data="modal" label="Пример, чего хочу" data-label="Пример, чего хочу" enctype="multipart/form-data">
<input class="form" name="name" type="text" value="" placeholder="Имя" required autocomplete="off">
<input class="form" name="phone" type="tel" value="" placeholder="+7 ( ) - -" required autocomplete="off">
<div class="imgPreview">
<input class="imgPreviewInput" name="UF_PHOTO" type="file" accept="image/*" value="" autocomplete="off">
</div>
<button class="btn btn-success">Заказать</button>
</form>
Скрипт обработки
<script>
jQuery('FORM[name=uploadZakaz]').submit(function(){
var thisObj = jQuery(this),
name = thisObj.find('INPUT[name=name]'),
phone = thisObj.find('INPUT[name=phone]'),
formDataPost = new FormData(thisObj[0]);
if(name.val() == ''){
jQuery('#alertModal DIV.modal-body').html('');
jQuery('#alertModal DIV.modal-body').append("<h3>Не все поля заполненны</h3><p>Введите свое имя</p>");
jQuery('#alertModal').modal();
name.focus();
return false;
}
if(phone.val() == ''){
jQuery('#alertModal DIV.modal-body').html('');
jQuery('#alertModal DIV.modal-body').append("<h3>Не все поля заполненны</h3><p>Введите свой телефон</p>");
jQuery('#alertModal').modal();
phone.focus();
return false;
} else {
var r2 = /^\+7 \([0-9]{3}\) [0-9]{3}-[0-9]{2}-[0-9]{2}$/i;
if(!r2.test(phone.val())){
jQuery('#alertModal DIV.modal-body').html('');
jQuery('#alertModal DIV.modal-body').append("<h3>Не все поля заполненны</h3><p>Введен не верный телефон</p>");
jQuery('#alertModal').modal();
phone.focus();
return false;
}
}
// append extra fields
formDataPost.append('func', 'sentLoaded');
jQuery.ajax({
url: '/phpscript.php',
type: 'POST',
data: formDataPost,
cache: false,
enctype: 'multipart/form-data',
processData: false,
contentType: false,
success : function(){}
})
.done( function(data){
data = JSON.parse(data);
if( data.id ){
jQuery('#alertModal DIV.modal-body').html('');
jQuery('#alertModal DIV.modal-body').append('<h3>Спасибо за заявку!</br>Мы свяжемся с Вами в ближайшее время!</h3>');
jQuery('.onlineZayavka').modal('hide');
jQuery('#alertModal').modal();
jQuery('INPUT[name=name]').val('');
jQuery('INPUT[name=phone]').val('');
jQuery('INPUT[name=UF_PHOTO]').val('');
jQuery('.imgPreview').css('background-image', '/images/noImg.jpg');;
} else {
jQuery('#alertModal DIV.modal-body .blockText').html('');
jQuery('#alertModal DIV.modal-body .blockText').append("<h3>Не все поля заполненны</h3>");
jQuery('#alertModal').modal();
}
})
.fail(function(data){
console.log(data);
//alert('Error');
});
return false;
});
</script>
Скрипт на стороне сервера
<?php
/// пример
if(!empty($_FILES['UF_PHOTO'])){
require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/cropImage.php');
$cropImage = new \cropImage();
$dirRoot = '/images/uploads';
$dir = $_SERVER['DOCUMENT_ROOT'] . $dirRoot;
if(!file_exists($dir)){
mkdir($dir, 0777, true);
}
$dirRootCache = '/cache/image-uploads';
$dirCache = $_SERVER['DOCUMENT_ROOT'] . $dirRootCache;
if(!file_exists($dirCache)){
mkdir($dirCache, 0777, true);
}
$tmpName = rand(100,999) . rand(100,999) . '_' . $_FILES['UF_PHOTO']['name'];
move_uploaded_file($_FILES['UF_PHOTO']['tmp_name'], $dirCache . '/' . $tmpName);
$img = $dirCache . '/' . $tmpName;
$createFile = !empty($_POST['name']) ? $_POST['name'] . '_' : '';
$createFile .= date('His') . '_' . $_FILES['UF_PHOTO']['name'];
$cropImage->cropImages($img, $dir . '/' . $createFile, 3000, 500, 80);
$img = $dirRoot . '/' . $createFile;
}
$subject = 'Заявка с сайта ' . $_SERVER['SERVER_NAME'] . ' с файлом';
$data = array(
'name' => !empty($_POST['name']) ? $_POST['name'] : '',
'phone' => !empty($_POST['phone']) ? $_POST['phone'] : '',
'file' => !empty($img) ? $img : '',
'label' => 'Заказ звонка с файлом',
);
$mailSender = new mailTo($mailToAdres, $mailFromAdres, $subject, $data);
$mailSender->sendMail();
echo json_encode( array(
"id" => 1,
"message" => "Ok",
));