使用malsup表单jquery成功发送邮件后如何在表单提交中显示成功消息而不刷新页面

Question

上传表单后我需要显示成功消息并将其作为附件发送到邮件中。我需要使用malups form js来实现这一点。如何为此编写jquery函数，而且我必须这样做而不刷新页面。

通过使用 ajaxForm 函数（），我可以显示警报而不是这个，我需要在成功发送带有附件的邮件后在 div 中显示成功消息。

php

 <?php
if ($_SERVER['REQUEST_METHOD']=="POST"){

   // Set the "To" email address
   $to="abc@gmail.com";

    //Subject of the mail
   $subject="Join Us E-mail with Resume attachment";



    // Check for empty fields

    if($_FILES['filename']['tmp_name']==""){
            echo '<font style="font-family:Verdana, Arial; font-size:11px; color:#F3363F; font-weight:bold">Please upload your resume</font>';
        }

   //if(empty($_POST['name'])  || empty($_POST['email']) || empty($_POST['message']))
//  {
//      /*$errors .= "\n Error: all fields are required";*/
//       echo '<font style="font-family:Verdana, Arial; font-size:11px; color:#F3363F; font-weight:bold">Please upload resume</font>';
//  }



   // Now Generate a random string to be used as the boundary marker
   $mime_boundary="==Multipart_Boundary_x".md5(mt_rand())."x";

   // Now Store the file information to a variables for easier access
   $tmp_name = $_FILES['filename']['tmp_name'];
   $type = $_FILES['filename']['type'];
   $file_name = $_FILES['filename']['name'];
   $size = $_FILES['filename']['size'];

   // Now here we setting up the message of the mail
   $message = "Uploaded file: $file_name";

   // Check if the upload succeded, the file will exist
   if (file_exists($tmp_name)){

      // Check to make sure that it is an uploaded file and not a system file
      if(is_uploaded_file($tmp_name)){

         // Now Open the file for a binary read
         $file = fopen($tmp_name,'rb');

         // Now read the file content into a variable
         $data = fread($file,filesize($tmp_name));

         // close the file
         fclose($file);

         // Now we need to encode it and split it into acceptable length lines
         $data = chunk_split(base64_encode($data));
     }

      // Now we'll build the message headers
      $headers = "From: $from\r\n" .
         "MIME-Version: 1.0\r\n" .
         "Content-Type: multipart/mixed;\r\n" .
         " boundary=\"{$mime_boundary}\"";

      // Next, we'll build the message body note that we insert two dashes in front of the  MIME boundary when we use it
      $message = "This is a multi-part message in MIME format.\n\n" .
         "--{$mime_boundary}\n" .
         "Content-Type: text/plain; charset=\"iso-8859-1\"\n" .
         "Content-Transfer-Encoding: 7bit\n\n" .
         $message . "\n\n";

      // Now we'll insert a boundary to indicate we're starting the attachment we have to specify the content type, file name, and disposition as an attachment, then add the file content and set another boundary to indicate that the end of the file has been reached
      $message .= "--{$mime_boundary}\n" .
         "Content-Type: {$type};\n" .
         " name=\"{$file_name}\"\n" .
         //"Content-Disposition: attachment;\n" .
         //" filename=\"{$fileatt_name}\"\n" .
         "Content-Transfer-Encoding: base64\n\n" .
         $data . "\n\n" .
         "--{$mime_boundary}--\n";

      // Thats all.. Now we need to send this mail... :)
      if (@mail($to, $subject, $message, $headers))
      {
       echo "success"; 
      }else
      {
         echo "failed";
      }
   }
}
?>

HTML

<form id="myform" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">

<input id="tele" type="file" name="filename"/>
<br/>
<input  class="formbtn" type="submit" id="upload" value="Upload" />
</form>

jQuery

<script>
$(document).ready(function () {

    $('#myform').validate({
        rules: {
            filename: {
                required: true,
                extension: "docx|rtf|doc|pdf"
            }
        },
        messages: {
            filename: {
                required: "Please upload resume",
                extension: "Please upload valid file formats"
            }
        }
    });

});
</script>
<script> 
    $(document).ready(function() { 
        $('#myform').ajaxForm(function() { 

           alert('success');
        }); 
    }); 

</script> 

Answer 1

在下面的代码之前，请确保您有一个 id 为 msg-div 的 div（名称由您选择），默认情况下将其显示设置为 none

<script> 
    $(document).ready(function() { 
        $('#myform').ajaxForm(function() { 
           $('#msg-div').css('display','block')
           $('#msg-div').html('success message here')
        }); 
    }); 
</script> 

Answer 2

如果我能很好地理解您的问题，您现在可以提醒消息，但您想将其加载到 div 中。

这应该很简单：

$("#yourContainerDiv").html(yourAlertString);

如果您需要创建 div，您可以在字符串中添加所需的任何 HTML 并将其附加到最终容器。您还可以使用：

$("#containerWhereYouWantToAppendMessage").append(htmlCodeWithMessage);