使用 AJAX/formData 上传表单文件

Question

我正在尝试 post 一个包含 PDF 文件上传的表单 ajax/formData。 post 与 php 方法配合使用效果很好。使用 ajax php-脚本无法识别该文件并且无法将其上传到服务器。请注意 ajax 函数响应成功并且控制台没有给出任何错误！感谢您的帮助！

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 = 'any.mail@gmail.com';

/*
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('any.mail@fischer-club.ch');
$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);

?>

Answer 1

等到提交事件发生来定义FormData

改变

var formData = new FormData(form);

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

到

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

使用 AJAX/formData 上传表单文件

Form file upload with AJAX/formData

ajax

jquery

form-data

phpmailer