Sending file to email using input type=“file” with AJAX and PHP

Question

I have a simple contact form with AJAX and PHP that I'm using send messages to my email address. Now, however, I would like to upload files and send them using this form as well. I've used input type="file".. however the uploaded file isn't being delivered. For example, I've tested this by attempting to upload several images and the file is being delivered as text "C:\\fakepath\\bahamas.jpg". I've added my code here as well, thank you for any responses and insight as to how I might achieve this : )

<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 on image will give text value which is a fake path plus filename. The fakepath is for security reasons. Try adding all your data with

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

Just added the below function for reference.

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

Sending file to email using input type=“file” with AJAX and PHP

Question

1 answers

solution1
1 2019-07-03 22:53:15

Sending file to email using input type=“file” with AJAX and PHP

Question

1 answers

solution1 1 2019-07-03 22:53:15

solution1
1 2019-07-03 22:53:15