Question

我有一个与AJAX和PHP的简单联系表单，我正在使用将邮件发送到我的电子邮件地址的方式。但是，现在，我也想上传文件并使用此表单发送它们。我使用了输入type =“ file” ..但是上传的文件没有被传递。例如，我通过尝试上传多个图像进行了测试，并且文件以文本“ C：\ fakepath \ bahamas.jpg”的形式传递。我也在这里添加了我的代码，感谢您对我如何实现这一目标的任何回应和见解：）

<html>

<head>
<script>
    function _(id) {
        return document.getElementById(id);
    }

    function submitForm() {
        _("mybtn").disabled = true;
        _("status").innerHTML = 'please wait ...';
        var formdata = new FormData();
        formdata.append("n", _("n").value);
        formdata.append("e", _("e").value);
        formdata.append("p", _("p").value);
        formdata.append("a", _("a").value);
        formdata.append("w", _("w").value);
        formdata.append("sp", _("sp").value);
        formdata.append("up", _("up").value);
        formdata.append("m", _("m").value);
        var ajax = new XMLHttpRequest();
        ajax.open("POST", "contact.php");
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                if (ajax.responseText == "success") {
                    _("my_form").innerHTML = '<h2>Thanks ' + _("n").value +
                        ', your message has been sent.</h2>';
                } else {
                    _("status").innerHTML = ajax.responseText;
                    _("mybtn").disabled = false;
                }
            }
        }
        ajax.send(formdata);
    }
</script>

<div class="container">

    <form id="my_form" onsubmit="submitForm(); return false;">

        <input id="n" type="text" name="name" class="form-control" placeholder="Please enter your name *"
            required="required" data-error="Firstname is required.">

        <input id="p" type="email" name="surname" class="form-control" placeholder="Email Address (optional)">

        <input id="e" type="text" class="form-control" placeholder="Business Name" required="required"
            data-error="Business Name is required.">

        <input id="a" type="text" class="form-control" placeholder="Business Address" required="required"
            data-error="Business Address is required.">

        <input id="w" type="text" class="form-control" placeholder="Business Website">

        <input id="sp" type="text" class="form-control" placeholder="Business Phone Number" required="required"
            data-error="Business Phone Number is required.">

        <input type="file" name="file" id="up" accept="application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint,
                    text/plain, application/pdf, image/*">

        <textarea id="m" name="message" class="form-control"
            placeholder="Write a message." rows="4" required="required"
            data-error="Leave a little more info : )"></textarea>

        <input id="mybtn" type="submit" value="Submit Form" class="btn btn-success btn-send" id="status">
        <span id="status"></span>

    </form>
</div>

<?php
if( isset($_POST['n']) && isset($_POST['e'])
&& isset($_POST['m']) ){
$n = $_POST['n'];
$e = $_POST['e'];
$p = $_POST['p'];
$a = $_POST['a'];
$w = $_POST['w'];
$sp = $_POST['sp'];
$up = $_POST['up'];
$m = nl2br($_POST['m']);
$to = "hello@emailaddress.com"; 
$from = $e;
$subject = 'SMS Intake Form Message';
$message = '<b>Name:</b> '.$n.' <br><b>Email:</b>
'.$e.'     <br><b>Phone:</b> '.$p.' 
<br><b>Address:</b>   '.$a.' <br><b>Website:</b>
'.$w.'    <br><b>Phone:</b> '.$sp.' <br>
<b>Files:</b>    '.$up.' <p>'.$m.'</p>';
$headers = "From: $from\n";
$headers .= "MIME-Version: 1.0\n";
$headers .= "Content-type: text/html; 
charset=iso-8859-    1\n";
if( mail($to, $subject, $message, $headers) ){
    echo "success";
} else {
    echo "The server failed to send the message. 
Please try again later.";
}
}
?>

Answer 1

图像上的Input.value将给出文本值，该值是伪路径加文件名。伪路径是出于安全原因。尝试使用添加所有数据

 var formdata = new FormData(_("my_form"));

只需添加以下功能即可。

 function _(id) {
    return document.getElementById(id);
}

通过AJAX和PHP使用输入type =“ file”将文件发送到电子邮件

1 个答案: