将文件从表单发送到电子邮件

时间:2016-04-09 02:48:52

标签: javascript php jquery ajax email

我正在试图找出如何将包含图像等文件的文件发送到文本文件,从表单提交通过ajax发送到我的php文件以发送到电子邮件中。我试图按照我在ajax和php电子邮件中获取其他数据的方式对其进行格式化,但我可以告诉表单在我的ajax中立即停止。它甚至没有发送到我的PHP,但我不确定我是否也有电子邮件部分。

这是我到目前为止所尝试的。我试图删除尽可能多的过时代码,但仍然包含足够的内容以便对我想要做的事情有一个良好的感觉。

如何通过AJAX将此文件附加/发送到从表单到我的php电子邮件的电子邮件

<form action="" autocomplete="on" method="POST" id="project-information-form" enctype="multipart/form-data">
  <input type="text" class="input-borderless" id="project-name" name="name" placeholder="Your Name">
  <input type="email" class="input-borderless" id="project-email" name="email" placeholder="Email Address">
  <input type="number" class="input-borderless" id="project-number" name="phone" placeholder="Phone Number">
  <input type="file" name="file" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple>
  <label for="file"><span id="file-upload-image"><img src="/icons/white-upload.png" height="25px" width="25px"></span>File Upload</label>
  <input type="submit" id="submit-project" class="submit-project-button" value="Send Project Inquiry">
</form>

AJAX

   $("#submit-project").on("click", function(event) {
     // event.preventDefault();

      var project_name = $("#project-name").val();
      var project_email = $("#project-email").val();
      var project_number = $("#project-number").val();
      var uploaded_file = $("#file").val();
        submitHandler: function(form) {
console.log(form);
          $.ajax({
            url: "email-project.php",
            type: "POST",
            data: {
              "project_name": project_name,
              "project_email": project_email,
              "project_number": project_number,
              "file": project_file
            },
            success: function(data) {
              //console.log(data); // data object will return the response when status code is 200
              if (data == "Error!") {
                alert("Unable to send email!");
                alert(data);
              } else {
              }
            },

电子邮件的PHP页面

ini_set('display_errors', 1);
error_reporting(E_ALL);

$project_name           = $_POST['project_name'];
$project_email          = $_POST['project_email'];
$project_number         = $_POST['project_number'];
$project_file           = $_POST['file'];

$to = '';
$subject = '';
$message = '
    <html>
    <head>
        <title>Project Inquiry Form Sent</title>
    </head>
    <body>
        <p>There has been a Project submitted. Here are the details:</p><br>
        <p>Name: '. $project_name .'</p>
        <p>Email: '. $project_email .'</p>
        <p>Phone Number: '. $project_number .'</p>
        <p>The client uploaded a file ' .$project_file.'.</p>

    </body>
    </html>
';
// To send HTML mail, the Content-type header must be set
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From:' .$project_email . "\r\n";

if (!empty($project_email)) { 
    if (filter_var($project_email, FILTER_VALIDATE_EMAIL)) { 

        //Should also do a check on the mail function
        if (mail($to, $subject, $message, $headers)) {
            echo "Your email was sent!"; // success message
        } else {
            echo "Mail could not be sent!"; // failed message
        }

    } else { 
        //Invalid email
        echo "Invalid Email, please provide a valid email address.";
    }

} else {
    echo "Email Address was not filled out.";
}

1 个答案:

答案 0 :(得分:0)

您需要在服务器上运行的脚本才能将文件移动到uploads目录。 jQuery ajax方法将表单数据发送到服务器,然后服务器上的脚本处理上载。

以下是使用PHP的示例。看看这个例子。

信用就在这里 - &gt; jQuery AJAX file upload PHP

$('#submit-project').on('click', function() {
var file_data = $('#file').prop('files')[0];   
var form_data = new FormData();                  
form_data.append('file', file_data);
alert(form_data);                             
$.ajax({
            url: 'email-project.php', // point to server-side PHP script 
            dataType: 'text',  // what to expect back from the PHP script, if anything
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,                         
            type: 'post',
            success: function(php_script_response){
                alert(php_script_response); // display response from the PHP script, if any
            }
 });
});