Для отправки нескольких файлов сразу html будет выглядеть так:
<div class="file-upload">
<label>
<input type="file" name="mail_file[]" multiple="multiple" onchange="GetFileName();" id="uploaded-file">
<span>Прикрепить файлы</span>
</label>
</div>
<div id="file-name"></div>
Input можно скрыть с помощью css, а кнопку "Прикрепить файлы" оформить:
.file-upload input[type=file] {
display: none;
}
.file-upload span {
background-image: url('путь к вашей иконке загрузки файла');
background-size: .875rem 1.5rem;
background-repeat: no-repeat;
background-position: 1.25rem center;
display: inline-block;
border: 1px solid #333232;
cursor: pointer;
padding: 1.1875rem 1.5rem 1.1875rem 3.3125rem;
font-weight: 400;
}
Для того, чтобы пользователь видел список добавленных файлов, напишем функцию getFileName():
function GetFileName () {
var file = document.getElementById ('uploaded-file').value;
var files = document.getElementById ('uploaded-file').files;
var html = "";
for (index = 0; index < files.length; ++index) {
//console.log(files[index].name);
html += '<div class="inner-file d-flex"><div class="file-icon"></div><span>' + files[index].name+'</span></div>';
}
document.getElementById ('file-name').innerHTML = html;
}
После того. как пользователь нажмет кнопку оправки формы, JS скрипт соберет все данные формы, в том числе и файлы, и отправит их на сервер:
<script>
jQuery(document).ready(function($){
var form = $(".form");
form.on("submit", function (event) {
event.preventDefault();
var vanilaForm = this;
var form = $(vanilaForm);
var way = form.data('action') || "ajax_form";
var formData = new FormData(vanilaForm);
formData.append("action", way);
$.ajax({
url: "/wp-admin/admin-ajax.php",
data: formData,
type: 'POST',
dataType: "json",
cache: false,
contentType: false,
processData: false,
success: PlaceResponse,
error: function(){}
});
});
function PlaceResponse(response){
if(response.type === 'success') {
form.html('<h3>Спасибо! Ваша заявка отправлена.</h3>');
} else {
form.html('<h3>Ошибка! Ваша заявка не отправлена.</h3>');
}
}
});
</script>
После отправки формы файлы передаются в PHP обработчик данных формы и отправляются по электронной почте:
add_action( 'wp_ajax_nopriv_ajax_form', 'ajax_form' );
add_action( 'wp_ajax_ajax_form', 'ajax_form' );
//обработка формы записи
function ajax_form() {
$_POST = wp_unslash($_POST);
$msg = '';
$msg .= "<h3>Контакты</h3><b>Имя:</b> {$_POST['client-name']}<br/>
<b>Телефон:</b> {$_POST['client-tel']}<br/>
<b>Email:</b> {$_POST['client-email']}";
$cnt = count($_FILES['mail_file']['name']);
$attachments = array();
if($cnt > 0) {
for($i = 0; $i < $cnt; ++$i) {
$file_dir = WP_CONTENT_DIR . "/uploads/".$_FILES['mail_file']['name'][$i];
move_uploaded_file ($_FILES['mail_file']['tmp_name'][$i],$file_dir);
$attachments[$i] = $file_dir;
}
}
$thm = 'Заявка c сайта '.get_bloginfo('name');
$thm = "=?utf-8?b?" . base64_encode( $thm ) . "?=";
$mail_to = 'testmail@test.ru';
$headers = "Content-Type: text/html; charset=utf-8\n";
// Отправляем почтовое сообщение
$mail_1 = wp_mail( $mail_to, $thm, $msg, $headers, $attachments );
if ($mail_1) {
$arr = array( 'type' => 'success' );
$response = json_encode( $arr );
} else {
$arr = array(
'type' => 'error'
);
$response = json_encode( $arr );
}
foreach ($attachments as $attachment) {
unlink($attachment);
}
// Сообщение о результате отправки почты
if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) {
echo $response;
wp_die();
}
}
Обновлено: 21.02.2020
Вам помогла эта статья? Оцените!