Ajax 联系表附件答案

【问题标题】：Ajax contact form attachmentAjax 联系表附件
【发布时间】：2016-05-28 11:15:07
【问题描述】：

我已经制作了一个有效的联系表格，但现在我也需要它才能发送附件。我找到了一些示例，但我无法让它们与我现有的代码一起使用。我宁愿保持尽可能多的形式完整，因为 css 是我想要的方式。我在下面的代码中省略了验证码和 css。

<div class="contact-box" id="contact-form">
    <div class="contact-form">
        <form name="contact-form" action="">
            <div class="name">
                <span class="fa fa-user"></span>
                <input id="name" placeholder="Name">
                <label class="error" for="name" id="name_error"><i class="fa fa-exclamation-triangle"></i>Please enter your name.</label>
            </div>
            <div class="email">
                <span class="fa fa-envelope"></span>
                <input id="email" placeholder="Email">
                <label class="error" for="email" id="email_error"><i class="fa fa-exclamation-triangle"></i>Please enter your email address.</label>
            </div>
            <div class="message">
                <span class="fa fa-pencil"></span>
                <textarea id="message" placeholder="Your Message"></textarea>
                <label class="error" for="message" id="message_error"><i class="fa fa-exclamation-triangle"></i>Please enter your message</label>
            </div>
            <label class="attachment">
                <input type="file" id="fileattachment"/>
                <span>Upload Booking Request Form</span>
            </label>
            <div class="submit">
                <input type="submit" name="submit" class="buttonsubmit" id="contact" value="Send">
            </div>

        </form>
    </div>
</div>
<div class="contact-box">
    <div class="contact-confirmation">
        <i class="fa fa-paper-plane"></i>
        <h3>Thanks for your message.</h3>
        <h4>We'll be in touch soon!</h4></div>
</div>

<script>
    $(function() {
        //Hide send confirmation
        $(".contact-confirmation").hide();

        //Validate form
        $('.error').hide();
        $("input#contact").click(function() {
            $('.error').hide();

            var name = $("input#name").val();
            if (name == "") {
                $("label#name_error").show();
                $("input#name").focus();
                return false;
            }

            var email = $("input#email").val();
            if (email == "") {
                $("label#email_error").show();
                $("input#email").focus();
                return false;
            }

            var message = $("textarea#message").val();
            if (message == "") {
                $("label#message_error").show();
                $("textarea#message").focus();
                return false;
            }

            //Attachment part???
            var attachment = $("#fileattachment")[0].files

            //Send form
            var dataString = 'name=' + name + '&email=' + email + '&message=' + message + '&attachment=' + attachment;
            jQuery.ajax({
                type: "POST",
                url: "processemail.php",
                data: dataString,
                success: function() {
                    jQuery(".contact-confirmation").fadeIn(1000);
                    jQuery(".contact-form").hide();
                }
            });
            return false;
        });
    });                 

</script>


//processemail.php

<?php

$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$sendto = $_POST["sendto"];

$sendto = 'overhere@example.com';

$headers = "From: " . $email . "\r\n";
$headers .= "Reply-To: ". $email . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";  

$message = '<html><body><strong>From: </strong>' . $name . '<br /><strong>Email: </strong>' . $email . '<br /><br /><strong>Message: </strong><br />' . $message . '</body></html>';

mail($sendto, $subject, $message, $headers);

?>

【问题讨论】：

更简单的文件类型提交表单并返回页面..
我同意@Cuchu - AJAX 文件上传虽然不错，但并非所有事情都需要。如果他们在为 web 设计的数据库前端中做一堆其他的事情，我可能会让他们 AJAX 处理几个文件，这样他们就不必离开前端页面，但如果你只是给他们上传表单后的成功消息，正常提交表单并查看 PHP 中的 $_FILES 数组，在等待时执行您的服务器操作，然后将它们放在成功或失败页面上，并在后面加上标题。跨度>
jQuery Ajax File Upload的可能重复
当我发布这篇文章时，我的想法是一样的，也许我应该只使用一个简单的提交表单。我希望这将是一个简单的补充，但在这一点上，我觉得我在并非绝对必要的事情上花费了太多时间。

标签： php jquery ajax contact-form

【解决方案1】：

HTML 与您的表单，但有一些修改。我使用按钮提交并在 php 中检查 POST 和 FILES 变量。您需要将 FILE 复制到路径。在 google 中查找如何将文件 $_FILES 复制到路径。

    <html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
</head>
<body>


<div class="contact-box" id="contact-form">
    <div class="contact-form">
        <form id="data" method="post" enctype="multipart/form-data">
        <!--<form name="contact-form" action=""> -->
            <div class="name">
                <span class="fa fa-user"></span>
                <input id="name" placeholder="Name" name="name">
                <label class="error" for="name" id="name_error"><i class="fa fa-exclamation-triangle"></i>Please enter your name.</label>
            </div>
            <div class="email">
                <span class="fa fa-envelope"></span>
                <input id="email" placeholder="Email" name="email">
                <label class="error" for="email" id="email_error"><i class="fa fa-exclamation-triangle"></i>Please enter your email address.</label>
            </div>
            <div class="message">
                <span class="fa fa-pencil"></span>
                <textarea id="message" placeholder="Your Message" name="message"></textarea>
                <label class="error" for="message" id="message_error"><i class="fa fa-exclamation-triangle"></i>Please enter your message</label>
            </div>
            <label class="attachment">
                <input type="file" id="fileattachment" name="file"/>
                <span>Upload Booking Request Form</span>
            </label>
            <div class="submit">
                <input type="submit" name="submit" class="buttonsubmit" id="contact" value="Send">
            </div>
            <button type="submit">Go</button>

        </form>
    </div>
</div>
<div class="contact-box">
    <div class="contact-confirmation">
        <i class="fa fa-paper-plane"></i>
        <h3>Thanks for your message.</h3>
        <h4>We'll be in touch soon!</h4></div>
</div>

<script>
    $(function() {
        //Hide send confirmation
        $(".contact-confirmation").hide();

        //Validate form
        $('.error').hide();
        /*
        $("input#contact").click(function() {
            $('.error').hide();

            var name = $("input#name").val();
            if (name == "") {
                $("label#name_error").show();
                $("input#name").focus();
                return false;
            }

            var email = $("input#email").val();
            if (email == "") {
                $("label#email_error").show();
                $("input#email").focus();
                return false;
            }

            var message = $("textarea#message").val();
            if (message == "") {
                $("label#message_error").show();
                $("textarea#message").focus();
                return false;
            }

            //Attachment part???
            var attachment = $("#fileattachment")[0].files

            //Send form
            var dataString = 'name=' + name + '&email=' + email + '&message=' + message + '&attachment=' + attachment;



    }); 
*/

    $("form#data").submit(function(){

console.log($(this));
    var formData = new FormData($(this)[0]);

    $.ajax({
        url : 'processemail.php',
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});
});                

</script>

</body>
</html>

在php中

<?php


//var_dump($_POST);
//var_dump($_FILES);

$uploads_dir = ""; /* local path */
if(isset($_FILES['file']) && ($_FILES['file']['error'] == 0) ) {
    $tmp_name = $_FILES["file"]["tmp_name"];
    $name = $_FILES["file"]["name"];
    move_uploaded_file($tmp_name, "{$uploads_dir}{$name}");
}

$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
//$sendto = $_POST["sendto"];

$sendto = 'overhere@example.com';

$headers = "From: " . $email . "\r\n";
$headers .= "Reply-To: ". $email . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";  

$message = '<html><body><strong>From: </strong>' . $name . '<br /><strong>Email: </strong>' . $email . '<br /><br /><strong>Message: </strong><br />' . $message . '</body></html>';

mail($sendto, $subject, $message, $headers);

?>

【讨论】：

我在我的本地主机中测试并且工作正常！此方法暗示在表单 > 输入中使用属性名称。名称是 $_POST 中的索引
所以我看看你和 Ashish 的解决方案。我不知道您可以如此轻松地收集表单数据。表单确实发送了（就像它已经发送的那样），但仍然没有附件。我已经在 google 上搜索了如何将文件 $_FILES 复制到路径，但我对现阶段发生的事情有点迷茫，并且不确定我什至在搜索什么？
您好，使用此模式，php 将文件复制到 /tmp 目录。您需要将 info 位于 $_FILES 中的文件移动到您的路径。
再次检查代码，我编辑php并将复制文件添加到本地pat。
添加 $uploads_dir www-data:www-data 所有者和 777

【解决方案2】：

您需要使用 formData 对象提交表单。

$("form").submit(function(){

var formData = new FormData($(this)[0]);

$.ajax({
    url: window.location.pathname,
    type: 'POST',
    data: formData,
    async: false,
    success: function (data) {
        alert(data)
    },
    cache: false,
    contentType: false,
    processData: false
});

return false;
});

这应该可以完成工作。

【讨论】：