Bootstrap 4 & Phpmailer 表单上传文件答案

【问题标题】：Bootstrap 4 & Phpmailer form upload fileBootstrap 4 & Phpmailer 表单上传文件
【发布时间】：2019-04-16 07:32:31
【问题描述】：

我认为这很容易实现，但我真的不知道从哪里开始。我想要的是人们可以添加图像或其他文件的形式的选项。

我已经在我的引导表单中添加了这个：

<!--attachments-->
<div class="form-group">
<label for="attachment">Attachment</label>                                            
<input type="file" class="form-control-file" name="attachmentFile" id="attachmentFile">
</div>

我猜到目前为止一切都很好。但它不会发送，因为必须在我的 phpmailer / send.php 文件中添加一些内容。这是我现在使用的脚本：

    <?php
    require 'PHPMailerAutoload.php';

    // Controleren of het formulier is verzonden dmv submit 
    if (isset($_POST['submitted'])) { 

    $errors = array(); // Initialize error array. 

    // Geef hier zoveel mogelijk vereiste velden voor validatie
    //Add attachment
    if(is_array($_FILES)) {
    $mail->AddAttachment($_FILES['attachmentFile']
    ['tmp_name'],$_FILES['attachmentFile']['name']); 
    }

    // Controleer naam 
    if (!preg_match("/^[a-zA-Z]+[a-zA-Z[:space:]]{2,}$/", $_POST['naam'])) { 
      $errors[] = 'Naam'; 
    }

    // Controleer adres 
    if (!preg_match("/^[a-zA-Z[:space:]]{1,}$/", $_POST['straat'])) { 
    $errors[] = 'Adres'; 
    } 

    // Controleer huisnummer
    if (!preg_match("/^[0-9]{1,4}$/", $_POST['huisnummer'])) { 
    $errors[] = 'Huisnummer'; 
    }

    // Controleer postcode
    if (!preg_match("/^[0-9]{4}$/", $_POST['postcode'])) {
    $errors[] = 'Postcode (Cijfers)'; 
    }

    // Controleer postcode letters
    if (!preg_match("/^[a-zA-Z]{2}$/", $_POST['letters'])) {
    $errors[] = 'Postcode (Letters)'; 
    }

    // Controleer woonplaats
    if (!preg_match("/^[a-zA-Z]+[a-zA-Z[:space:]]{2,}$/", $_POST['woonplaats'])) {
    $errors[] = 'Woonplaats'; 
    }

    // Controleer Kengetal 
    if (!preg_match("/^[0]{1}[0-9]{1,3}$/", $_POST['kengetal'])) {
    $errors[] = 'Kengetal'; 
    }

    // Controleer telefoonnummer 
    if (!preg_match("/^[0-9]{6,8}$/", $_POST['telefoon'])) {
    $errors[] = 'Telefoonnummer'; 
    }

    // Controleer e-mail adres 
    if (!preg_match("/^([a-zA-Z0-9])+([\.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-]+)*\.([a-zA-Z]{2,})$/", $_POST['email'])) { 
      $errors[] = 'E-mail adres'; 
    } 

    // Controleer tekstvak
    if (empty($_POST['bericht'])) { 
      $errors[] = 'Bericht'; 
    } 

    if (empty($errors)) {

    // Voer hier de gegevens in

    $mailFrom = "myEmail";
    $mailTo = "myEmail";
    $senderNaam = $_POST['naam'];
    $senderEmail = $_POST['email']; 
    $subject = 'mySubject';

    $okMessage = '<p>blablabla</p>';
    $errorMessage = '<p>blablabla</p>';

    $emailText .= "Naam: " . $_POST['titel']." ". $_POST['naam']. "\n";
    $emailText .= "Bedrijfsnaam: " . $_POST['bedrijfsnaam']. "\n";
    $emailText .= "Adres: " . $_POST['straat']." ". $_POST['huisnummer']." ". $_POST['toevoeging']. "\n";
    $emailText .= "Postcode: " . $_POST['postcode']." ". $_POST['letters']. "\n";
    $emailText .= "Woonplaats: " . $_POST['woonplaats']. "\n";
    $emailText .= "Telefoonnummer: " . $_POST['kengetal']." ". $_POST['telefoon']. "\n";
    $emailText .= "E-mailadres: " . $_POST['email']. "\n";
    $emailText .= "Bericht: " . $_POST['bericht']. "\n";

    $mail = new PHPMailer;
    $mail->CharSet = 'UTF-8';
    $mail->isSMTP();                                    // Set mailer to use SMTP
    $mail->Host = 'SMTP SERVER';            // Specify main and backup SMTP servers
    $mail->SMTPAuth = true;                             // Enable SMTP authentication
    $mail->Username = 'User';               // SMTP username
    $mail->Password = 'Pass';                        // SMTP password
    $mail->SMTPSecure = 'ssl';                          // Enable TLS encryption, `ssl` also accepted
    $mail->Port = 465;                                   // TCP port to connect to


    $mail->Sender = $mailFrom;
    $mail->SetFrom($senderEmail, $senderNaam);
    $mail->AddReplyTo($senderEmail, $senderNaam);
    $mail->Subject = $subject;
    $mail->MsgHTML($emailText);
    $mail->AddAddress($mailTo, $mailTo);
    $mail->addAttachment($uploadfile, 'My uploaded file'); **// ADDED THIS HERE**


    $mail->isHTML(true);                                // Set email format to HTML

    $mail->Subject = $subject;
    $mail->Body    = "<table>
                <tr><td style='padding-left: 10px; padding-right: 10px; background: #eee;'>Naam:</td><td style='padding-left: 10px; font-weight: bold;'>".$_POST['titel']." ".$_POST['naam']."</td></tr>
                <tr><td style='padding-left: 10px; padding-right: 10px; background: #eee;'>Bedrijfsnaam:</td><td style='padding-left: 10px; font-weight: bold;'>".$_POST['bedrijfsnaam']."</td></tr>
                <tr><td style='padding-left: 10px; padding-right: 10px; background: #eee;'>Adres:</td><td style='padding-left: 10px; font-weight: bold;'>".$_POST['straat']." ".$_POST['huisnummer']." ".$_POST['toevoeging']."</td></tr>
                <tr><td style='padding-left: 10px; padding-right: 10px; background: #eee;'>Postcode:</td><td style='padding-left: 10px; font-weight: bold;'>".$_POST['postcode']." ".$_POST['letters']."</td></tr>
                <tr><td style='padding-left: 10px; padding-right: 10px; background: #eee;'>Woonplaats:</td><td style='padding-left: 10px; font-weight: bold;'>".$_POST['woonplaats']."</td></tr>
                <tr><td style='padding-left: 10px; padding-right: 10px; background: #eee;'>Telefoonnummer:</td><td style='padding-left: 10px; font-weight: bold;'>".$_POST['kengetal']." ".$_POST['telefoon']."</td></tr>
                <tr><td style='padding-left: 10px; padding-right: 10px; background: #eee;'>E-mailadres:</td><td style='padding-left: 10px; font-weight: bold;'>".$_POST['email']."</td></tr>
                <tr><td style='padding-left: 10px; padding-right: 10px; background: #eee;'>Bericht:</td><td style='padding-left: 10px; font-weight: bold;'>".$_POST['bericht']."</td></tr>
                </table>";

    $mail->AltBody = $emailText;

    if(!$mail->send()) {
            $responseArray = array('type' => 'danger', 'message' => $errorMessage);
        } else {
            $responseArray = array('type' => 'success', 'message' => $okMessage);
            }
        }

    if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
        $encoded = json_encode($responseArray);

        header('Content-Type: application/json');

        echo $encoded;
        } else {
        echo $responseArray['message'];
        }

    }
    ?>

也将此添加到<form>enctype="multipart/form-data"

编辑#2：我也有一个contact.js文件：

data: $(this).serialize(), 我改变了它： data: new FormData(this), 因为我在某处读到这可能是问题所在，但没有任何意义。

【问题讨论】：

您的代码看起来不错。要了解如何处理文件上传，请查看the example code provided with PHPMailer。另一件事——不要使用提交者的地址作为发件人地址；它是伪造的，会导致 SPF 失败。将您自己的地址作为表单地址，并使用提交者的地址作为回复（就像您正在做的那样）。
其实我不太擅长这个。所以我不知道在哪里放什么。
您将需要实际尝试；您现有的代码几乎就在那里，因此请查看它与我指出的示例之间的差异。
好的，我在上面进行了编辑。它确实发送，但它不发送附件。不知道出了什么问题。
记录在案...我希望人们向我发送文件，而不是在他们发送文件时向他们发送文件。

标签： forms twitter-bootstrap-3 bootstrap-4 phpmailer

【解决方案1】：

好的，表单正在发送附件！只有一件小事，我希望有人能帮助我……稍后再详细介绍。首先是代码。

在 contact.js 中 - 我必须将 data: $(this).serialize(), 更改为 data: new FormData(this),

    $(function () {

        $('#contact-form').validator();

        $('#contact-form').on('submit', function (e) {
            if (!e.isDefaultPrevented()) {
                var url = "send.php";

                $.ajax({
                    type: "POST",
                    url: url,
                    data:  new FormData(this),
                    cache       : false,
                    contentType : false,
                    processData : false,
                    success: function (data)
                    {
                        var messageAlert = 'alert-' + data.type;
                        var messageText = data.message;

                        var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                        if (messageAlert && messageText) {
                            $('#contact-form').find('.messages').html(alertBox);
                            $('#contact-form')[0].reset();  //Remove this line if form should not reset after submit
                            $('body, html').animate({scrollTop:$('#contact-form').offset().top}, 'fast'); //Remove this line if form should not scroll to top of the form after submit
                        }
                    }
                });
                return false;
            }
        })
    });

Myform.html - 两件事：<form> 中的 enctype="multipart/form-data" 和这个

    <!--attachments-->
      <div class="form-group">
        <label for="attachment">Attachment</label>                                            
        <input type="file" class="form-control-file" name="attachmentFile" id="attachmentFile">
      </div>

表格中您想要的位置。

最后把这个放到你的phpmailer文件中：

    //Add attachment
    if(is_array($_FILES)) {
        $mail->AddAttachment($_FILES['attachmentFile']['tmp_name'],$_FILES['attachmentFile']['name']); 
    }

我在$mail->AddAddress($mailTo, $mailTo);下面做的

到目前为止如何解决这个问题。我一开始提到的还有一个问题。

没有 data: new FormData(this), 当我点击发送并且表单保持在同一页面时，我仍然会收到我的 okMessage（带有标记）。

使用 data: new FormData(this), 会转到一个新页面，并在纯文本（不带标记）的情况下提供黑底白字。所以它就像 FormData 推翻了一些东西。希望有人可以帮助我解决这个问题。

编辑：似乎我也解决了这个问题。放这个..

cache       : false,
contentType : false,
processData : false,

..下面data: new FormData(this),

【讨论】：