Search code examples
jqueryajaxphpmailerform-data

Form file upload with AJAX/formData

I'm trying to post a form that includes an upload of a PDF-file with ajax/formData. The post works fine with php method. Using ajax the php-script doesn't recognize the file and is unable to upload it on the server. Note that the ajax function response is successfull and the console doesn't give any error! Thanx for any help!

Javascript:

<script type="text/javascript">
jQuery(document).ready(function() {
var frm = jQuery('#AnmeldungClassic');
var form = jQuery('#AnmeldungClassic')[0];
var formData = new FormData(form);

    frm.submit(function (e) {

        e.preventDefault();

        jQuery.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
                jQuery("#Response").html(data);
                jQuery("#submit").text('Danke!');
                jQuery("#submit").attr("disabled", true);
            },
            error: function (data) {
                jQuery( "#Response" ).html(data);
            },
        });

});
});</script>

php:

<?php
/*
PHPMailer laden
*/
use PHPMailer\PHPMailer\PHPMailer;
require '/is/htdocs/wp12143162_X3J0UKE27L/www/PHPMailer/src/PHPMailer.php';

/*
Wem wird die Form per Email zugestellt?
*/
$empanger_email = '[email protected]';

/*
Abholung der Forminformationen.
*/
$verein = $_POST['verein'] ;
$fahrchef = $_POST['fahrchef'] ;
$email_addresse = $_POST['email_addresse'] ;
$telefon = $_POST['telefon'] ;
$kommentar = $_POST['kommentar'] ;  

/*
Hochladen des Anmeldeformulars auf dem Server und Überprüfen, dass es sich um ein pdf handelt.
*/
$target_dir = $_SERVER['DOCUMENT_ROOT'] . 'images/PDFs/';
$target_file = $target_dir . basename($_FILES['fileToUpload']['name']);

if ($_FILES['fileToUpload']['type'] != "application/pdf") {
echo '<p class="bg-danger" style="padding: 15px;">Die hochgeladene Datei ist kein PDF! Bitte nur PDF verwenden!</p>';
}
else {
$result = move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $target_file);
if ($result != 1) {
echo '<p class="bg-danger" style="padding: 15px;">Etwas ist schief gegangen! Aktualisiere die Seite und versuche es nochmals.</p>';
} #endIF
}

/*
Verschicken der Email.
*/

$mail = new PHPMailer();
$mail->setFrom('[email protected]');
$mail->addAddress($empanger_email);
$mail->Subject = 'Anmeldung';
$mail->isHTML(true);
$mail->Body = 'Ciao Patrick<br>
Du hast eine Anmeldung zur FCB-Classic erhalten:<br>
Name des Vereins: ' . $verein . ' <br>
Fahrchef: ' . $fahrchef . ' <br>
Email: ' . $email_addresse . ' <br>
Tel.: ' . $telefon . ' <br>
Kommentar: ' . $kommentar . ' <br>
Yves';
$mail->AddAttachment($target_file);
if (!$mail->send()) {
echo '<p class="bg-danger" style="padding: 15px;">Etwas ist schief gegangen! Aktualisiere die Seite und versuche es nochmals.</p>';
} else {
echo '<p class="bg-success" style="padding: 15px;">Danke für Eure Anmeldung! Der Fischer Club wird demnächst mit Euch Kontakt aufnehmen.</p>';
}

/*
Löschen des Attachments auf dem Server.
*/
unlink($target_file);

?>

Solution

  • Wait until submit event occurs to define the FormData

    change

    var formData = new FormData(form);

frm.submit(function (e) {
    e.preventDefault();

    To

    frm.submit(function (e) {
    e.preventDefault();
    // TODO: validate form first
    formData = new FormData(this);