How to simplify the script form submit file jQuery + Ajax?

Hi!
There are too zamorochennye the upload script, but it tied to the validator.
Script
jQuery(document).ready(function(){
 // =validation
 var errorTxt = 'Error sending';
jQuery("#sendform").validate({
 submitHandler: function(form){
 jQuery("#message-fos").html('<p class="thank">Data sent...<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">Data to send!<p>');
}
}
};
xhr.send(formData);
}
});
})


If the validator is removed, then start throwing errors.

He refers to this multisend.php
<?php

// Auxiliary function to send a mail message with an attachment
function send_mail($to, $body, $email, $filename)
{
 $subject = 'Form feedback';
 $boundary = "--".md5(uniqid(time())); // generate a separator
 $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 = "Name:\r\n".$name."\r\n\r\n";
 $body .= "Contact number:\r\n".$tel."\r\n\r\n";
 $body .= "E-mail:\r\n".$email."\r\n\r\n";
 $body .= "A brief crux of the matter:\r\n".$message; 
 send_mail($to, $body, $email, $filename);
}
?>

How you can simplify the form submission with the file? To be able to put the success and error sending
to such a level
(but this script also does not send)
script
$(document).ready(function() {
 $("form").submit(function() { 
 var th = $(this);
$.ajax({
 type: "POST",
 url: "multisend.php", 
 data: th.serialize()
 }).done(function() {
 // done function
});
 return false;
});
 });

March 12th 20 at 08:42
2 answers
March 12th 20 at 08:44
Solution
Good evening.
Here is an example. Send the form along with the image.
$(function() {
 $('#form-data').on('submit', function(e){
e.preventDefault()
 var form = $(this); // Assume this code is executed in event handler for 'submit' the form
 var data = new FormData(); // To send files will need the FormData object. Read more about him you can read in the documentation https://developer.mozilla.org/en-US/docs/Web/API/FormData

 // Collect data from conventional fields
 form.find(':input[name]').not('[type="file"]').each(function() { 
 var field = $(this);
 data.append(field.attr('name'), field.val());
});

 // Collects the file (will be a little different for multiple files)
 var filesField = form.find('input[type="file"]');
 var fileName = filesField.attr('name');
 var file = filesField.prop('files')[0];
 data.append(fileName, file) ;

 // Send data
 var url = 'upload.php';

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

There are too zamorochennye the upload script, but it tied to the validator.

Regular script, no problems.
About troubles mean that it only works in conjunction with the validator.
Thanks for the script!

However, it does not send the files.. - melany_Parisi commented on March 12th 20 at 08:47
@melany_Parisi, all it sends/loads. Connect an owl handler. - Jeramie57 commented on March 12th 20 at 08:50
Thank You very much for participating in something so important.
This solution is really useful for many - melany_Parisi commented on March 12th 20 at 08:53
Tell me how to add the script also selects you ? and textarea - melany_Parisi commented on March 12th 20 at 08:56
@melany_Parisi, the textarea is already there.
And select can
$('select option:selected').val() - Jeramie57 commented on March 12th 20 at 08:59
March 12th 20 at 08:46
$(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)
}
});
})
});

Find more questions by tags jQueryJavaScriptAJAX