Question

我已经制作了一个有效的联系表格，但现在我需要它才能发送附件。我找到了一些例子，但是我不能让他们使用我现有的代码。我希望尽可能多地保持形式，因为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);

?>

Answer 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);

?>

Answer 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;
});

这应该可以胜任。

Ajax联系表单附件

2 个答案: