How to pass GET and FILE using Javascript to a PHP file

Question

I have a this code to send email.

HTML Page

<form id="emailForm" method="post" enctype="multipart/form-data" onSubmit="return sendmailForm(this)">
    <input type="text" id="from" />
    <input type="text" id="to" />
    <input type="text" id="subject" />
    <textarea id="input"></textarea>
    <input type="file" id="file" />
    <input type="submit" id="submit" value="submit" />
</form>

Javascript to send the values to PHP file

function sendmailForm(){
    $('#loading').css('display','block');
    var to = document.getElementById('to').value;
    var from = document.getElementById('from').value;
    var subject = document.getElementById('subject').value;
    var input = document.getElementById('input').value;
    var file = document.getElementById('file').value;

    var str = 'to='+to+'&from='+from+'&subject='+subject+'&input='+input+'&file='+file;

    if (window.XMLHttpRequest)
    {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else
    {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            $('#success').css('display','inline');
            $('#loading').css('display','none');
        }
    }   
    xmlhttp.open("GET","generate_email_check.php?"+str,true);
    xmlhttp.send();
    return false;
}

and PHP file to get this values and send the email

$to= mysql_prep($_GET['to']);
$from = mysql_prep($_GET['from']);
$subject = mysql_prep($_GET['subject']);
$input = mysql_prep($_GET['input']);

$headers = "MIME-Version: 1.0\r\n";
$headers.= "Content-Type: text/html; charset=iso-8859-1\r\n";
$headers.= "From: ".$from."\r\n";
$headers.= "Reply-To: ".$from."\r\n";
$headers.= "Return-Path: ".$from."\r\n";
$headers.= "X-Sender: ".$from."\r\n";   

if($_FILES["file"]["name"] != "")
{  
    $strFilesName = $_FILES["file"]["name"];  
    $strContent = chunk_split(base64_encode(file_get_contents($_FILES["file"]["tmp_name"])));  
    $headers .= "--".$strSid."\n";  
    $headers .= "Content-Type: application/octet-stream; name=\"".$strFilesName."\"\n";  
    $headers .= "Content-Transfer-Encoding: base64\n";  
    $headers .= "Content-Disposition: attachment; filename=\"".$strFilesName."\"\n\n";  
    $headers .= $strContent."\n\n";  
} 
mail($to, $subject, $input, $headers);

My problem is the javascript is not passing the values for the $_FILES, how can I change the javascript code to pass the attachment?

The php file is working fine without the $_FILES

Any help will be appreciated.

score 0 · Answer 1 · edited May 23 '17 at 10:31

Your xmlhttp appears to be passing the filename as an URL param, I doubt that's what you intended. You actually need to send the file data if you expect the backend script to use it.

Here's how: Upload file data via ajax request

function upload(formElement) {
var xhr = new XMLHttpRequest();
xhr.open(formElement.method, formElement.action);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // Handle response.
        alert(xhr.responseText); // handle response.
    }
};
xhr.send(new FormData(formElement));
return false;

}

Note the FormData object being created, this contains your file data. It is supported in most modern browsers (Naturally IE is miles behind, this is only support since IE10).

Overall you may have better results from a library like plupload. This library handles older browsers via fallback methods and plugins like Flash or Silverlight. It also has code for progress bars, feedback and events and downsampling large image files client-side.

How to pass GET and FILE using Javascript to a PHP file

1 Answers1