如何在不使用頁面刷新的情況下使用malsup表單jquery成功發送郵件後在表單中顯示成功消息

Question

我需要在上傳表單後顯示成功消息並將其作爲附件發送給mail.I需要通過使用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); 

如果你需要創建你可以添加你需要在你的字符串，並將其連接到最終容器的任何HTML股利。您還可以使用：

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