Mesuti
@Mesuti

Как упростить скрипт отправки формы с файлом на jQuery + Ajax?

Привет!
Есть слишком замороченный скрипт отправки, но он завязан на валидаторе.
Скрипт

jQuery(document).ready(function(){
    // =validation
    var errorTxt = 'Ошибка отправки';
    jQuery("#sendform").validate({
        submitHandler: function(form){
            jQuery("#message-fos").html('<p class="thank">Данные отправляются...<p>');
            var form = document.forms.sendform,
                formData = new FormData(form),
                xhr = new XMLHttpRequest();

            xhr.open("POST", "multisend.php");

            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if(xhr.status == 200) {
                        jQuery("#message-fos").html('<p class="thank2">Данные отправлены!<p>');
                    }
                }
            };
            xhr.send(formData);
        }
    });
})


Если валидатор удалить, то начинают сыпаться ошибки.

Он обращается к этому multisend.php

<?php

// Вспомогательная функция для отправки почтового сообщения с вложением
function send_mail($to, $body, $email, $filename)
{
    $subject = 'Форма обратно связи';
    $boundary = "--".md5(uniqid(time())); // генерируем разделитель
    $headers = "From: ".$email."\r\n";   
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .="Content-Type: multipart/mixed; boundary=\"".$boundary."\"\r\n";
    $multipart = "--".$boundary."\r\n";
    $multipart .= "Content-type: text/plain; charset=\"utf-8\"\r\n";
    $multipart .= "Content-Transfer-Encoding: quoted-printable\r\n\r\n";

    $body = $body."\r\n\r\n";

    $multipart .= $body;
    foreach ($filename as $key => $value){
        $fp = fopen($value[0], "r"); 
        $content = fread($fp, filesize($value[0]));
        fclose($fp);
        $file .= "--".$boundary."\r\n";
        $file .= "Content-Type: application/octet-stream\r\n";
        $file .= "Content-Transfer-Encoding: base64\r\n";
        $file .= "Content-Disposition: attachment; filename=\"".$value[1]."\"\r\n\r\n";
        $file .= chunk_split(base64_encode($content))."\r\n";
    }
    $multipart .= $file."--".$boundary."--\r\n";
    mail($to, $subject, $multipart, $headers);
}

$to = 'mail@yandex.ru, mail2@mail.ru';

if ( isset( $_POST['sendMail'] ) ) {
    $name   = substr( $_POST['name'], 0, 64 );
    $tel = substr( $_POST['tel'], 0, 64 );
    $email   = substr( $_POST['email'], 0, 64 );
    $message = substr( $_POST['message'], 0, 250 );

if($_FILES)
{
    print_r($_FILES);
    $filepath = array();
    $filename = array();
    $file2 = array();
    $i = 0;
        foreach ($_FILES["file"]["error"] as $key => $error) {
            if ($error == UPLOAD_ERR_OK) {
                $filename[$i][0] = $_FILES["file"]["tmp_name"][$key];
                $filename[$i][1] = $_FILES["file"]["name"][$key];
                $i++;
            }
        }
    }

    $body = "Имя:\r\n".$name."\r\n\r\n";
    $body .= "Контактный номер:\r\n".$tel."\r\n\r\n";
    $body .= "E-mail:\r\n".$email."\r\n\r\n";
    $body .= "Краткая суть вопроса:\r\n".$message; 
    send_mail($to, $body, $email, $filename);
}
?>



Как можно упростить отправку формы с файлом? Чтобы можно было ставить успех и ошибку отправки
до такого уровня
(но этот скрипт тоже не отправляет)
скрипт

$(document).ready(function() {
        $("form").submit(function() { 
            var th = $(this);
            $.ajax({
                type: "POST",
                url: "multisend.php", 
                data: th.serialize()
            }).done(function() {
                // done function
            });
            return false;
        });
    });

  • Вопрос задан
  • 1616 просмотров
Решения вопроса 1
slo_nik
@slo_nik
Добрый вечер.
Вот пример. Отправляет форму вместе с изображением.
$(function() {
    $('#form-data').on('submit', function(e){
        e.preventDefault()
        var form = $(this); // Предположу, что этот код выполняется в обработчике события 'submit' формы
        var data = new FormData();  // Для отправки файлов понадобится объект FormData. Подробнее про него можно прочитать в документации - https://developer.mozilla.org/en-US/docs/Web/API/FormData

        // Сбор данных из обычных полей
        form.find(':input[name]').not('[type="file"]').each(function() { 
            var field = $(this);
            data.append(field.attr('name'), field.val());
        });

        // Сбор данных о файле (будет немного отличаться для нескольких файлов)
        var filesField = form.find('input[type="file"]');
        var fileName = filesField.attr('name');
        var file = filesField.prop('files')[0];
        data.append(fileName, file) ;

        // Отправка данных
        var url = 'upload.php';

        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            contentType: false,
            cache: false, 
            processData:false, 
            success: function(response) {
                console.log(response)
            }           
        });  
    })          
});

Есть слишком замороченный скрипт отправки, но он завязан на валидаторе.

Обычный скрипт, никаких заморочек.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Eugeny1987
Работаю с HostCMS
$(function() {
	$('#form-data').on('submit', function(e){
		e.preventDefault();
		var form = $(this);            
		formData = new FormData(form.get(0));

		var url = 'upload.php';

		$.ajax({
			url: url,
			type: 'POST',
			data: formData,
			contentType: false,
			cache: false,
			processData:false,
			success: function(response) {
				console.log(response)
			}
		});
	})
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы