Как отправить файл на сервер PHP из JS?

Question

Я новичек, поэтому не кидайтесь пожалуйста камнями))).

Не понимаю почему не отправляются данные из "file" в обработчик PHP. С обработчика распечатываю любое значение и ответ приходит обратно в JS, но когда я пытаюсь распечатать "file" приходит пустой ответ.

Делаю я все это что бы убедится что файл улетает в обработчик, для того что бы этот файл потом записать в на сервер в папку

// $(function () {
//     alert('Подключен form_mail.js');
// });

$("#sendMail").on("click", function () {
    let name = $("#name").val().trim();
    let email = $("#email").val().trim();
    let tel = $("#tel").val().trim();
    let number_order = $("#number_order").val().trim();
    let message = $("#message").val().trim();
    let file  = $("#file").val();

    $.ajax({
        url: 'assets/ajax/mail.php',
        type: 'POST',
        cache: false,
        data: {'name': name, 'email': email, 'tel': tel, 'number_order': number_order, 'message': message, 'file': file},
        dataType: 'html',
        beforeSend: function () {
            $("#sendMail").prop("disable", true);
        },
        success: function (data) {
            $("#form_contact").trigger("reset");
            alert(data);
            // if(data) {
            //     $("#form_contact").trigger("reset");
            //     $("#sendMail").prop("disable", false);
            //         alert("Сообщение отправлено");
            // }else{
            //     alert("Ошибка");
            // }
        }
    })
});

                        <form id="form_contact" action="mail.php" method="post" enctype="multipart/form-data" class="contact-one__form">  <!---->
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="input-box">
                                        <label for="name">Ваше имя</label>
                                        <input required type="text" id="name" placeholder="Иван Иванов" name="name" value="">
                                    </div>
                                </div><!-- /.col-lg-6 -->
                                <div class="col-lg-6">
                                    <div class="input-box">
                                        <label for="email">Email</label>
                                        <input required type="email" id="email" placeholder="Email" name="email" value="">
                                    </div>
                                </div><!-- /.col-lg-6 -->
                                <div class="col-lg-6">
                                    <div class="input-box">
                                        <label for="tel">Номер телефона</label>
                                        <input required type="tel" id="tel" placeholder="+79997772255" name="tel" value="">
                                    </div>
                                </div><!-- /.col-lg-6 -->
                                <div class="col-lg-6">
                                    <div class="input-box">
                                        <label for="number_order">№ заказа</label>
                                        <input required id="number_order" type="text" placeholder="0000000-я00" name="number_order" value="">
                                    </div>
                                </div><!-- /.col-lg-6 -->
                                <div class="col-lg-12">
                                    <div class="input-box">
                                        <label for="message">Сообщение</label>
                                        <textarea required id="message" placeholder="Ваше сообщение" name="message"></textarea>
                                    </div>
                                </div><!-- /.col-lg-12 -->
                                <div class="col-lg-6">
                                    <input id="file " type="file" name="file" value="">
                                </div><!-- /.col-lg-6 -->
                                <div class="col-lg-12 text-left">
                                    <br>
                                    <button type="button" id="sendMail" class="main-btn">Отправить</button>
                                </div><!-- /.thm-btn contact-one__btn -->
                            </div><!-- /.row -->
                        </form>

.

Answer 1

Попробуйте отправлять файл через FormData

$("#sendMail").on("click", function () {
    let name = $("#name").val().trim();
    let email = $("#email").val().trim();
    let tel = $("#tel").val().trim();
    let number_order = $("#number_order").val().trim();
    let message = $("#message").val().trim();
    let file  = $("#file");

    let formData = new FormData();
    formData.append('name', name);
    formData.append('email', email);
    formData.append('tel', tel);
    formData.append('number_order', number_order);
    formData.append('message', message);
    formData.append('file', file.prop('files')[0]);

    $.ajax({
        url: 'assets/ajax/mail.php',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        beforeSend: function () {
            $("#sendMail").prop("disable", true);
        },
        success: function (data) {
            $("#form_contact").trigger("reset");
            alert(data);
        }
    })
});

БЛОГ НА HUSL

Как отправить файл на сервер PHP из JS?

Ответы (1 шт):