Отправка нескольких файлов через ajax форму в WordPress

Для отправки нескольких файлов сразу 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

Вам помогла эта статья? Оцените!
(2 оценок, среднее: 5,00 из 5)
Загрузка...

Поддержать развитие блога https://www.patreon.com/processby

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *