I have been working on making a form that uploads an image through ajax with php doing the upload. For some background I am having an issue where the xhr.readyState and .Status seem to run and upload.php seems to run (in safari it goes and runs upload.php it seems to me... I have not used the ajax/javascript debugger too much) but it will run my else statement (i believe becuase it goes to status 2 and then 4) and then run xhr.responseText. Unfortunately it does not seem to run the upload.php right (which may be a php problem). I went ahead and replaced the php with a print statement which when running alert(xhr.response.Text) comes up with a blank alert statement and I am at a loss where the issue is. Below is my form code, ajax code and the php code i'm trying to get a response from.

Does anyone see the issue I am having? I am new to AJAX and have not worked with PHP in some time. I am working on upping my ajax/javascript skills but from my view it does not seem to be getting the ajax correctly.

<form action="scripts/upload.php" method="post" enctype="multipart/form-data">
	    <label>Select a File to Upload</label> <input id="upload_file" type="file" name="upload_file" /> 
	    <input type="button" onclick="loadFile()" value="Upload"  />

$(document).ready(function() {
  // Handler for .ready() called.

  $('.heading').click(function() {
	  if($(this).find('li').is(':visible')) {	
  	}else {

var xhr = createRequest();

function loadFile() {
//retrieve the FileList object from the referenced element ID
	var myFileList = document.getElementById('upload_file').files;
	//grab the first file object from the filelist
	var myFile = myFileList[0];
	//set some variables containing attributes of file
	var myFileName = myFile.name;
	var myFileSize = myFile.size;
	var myFileType = myFile.type;
	//alert the information gathered and if it is right
	alert("FileName: " + myFileName + "- FileSize: " + myFileSize + " - FileType: " + myFileType);
	//check above by alert if file size is below a certain MB and of image type JPEG, PNG, GIF
	//Let's upload the complete file object

function uploadFile(myFileObject) {
	// Open Our formData Object
	var formData = new FormData();
	// Append our file to the formData object
	// Notice the first argument "file" and keep it in mind
	formData.append('my_uploaded_file', myFileObject);
	// Create our XMLHttpRequest Object
	xhr.onreadystatechange = addImage;
	// Open our connection using the POST method
	xhr.open("POST", 'upload.php');
	//Send the proper header information along with the request
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	// Send the file

function addImage() {
	if (xhr.readyState === 4 && xhr.status === 200) {
    } else {
	    alert("ERROR ERROR: " + xhr.status);
PHP Code:

define("UPLOAD_DIR", "../images");

if (!empty($_FILES["myFile"])) {
    $myFile = $_FILES["myFile"];

    if ($myFile["error"] !== UPLOAD_ERR_OK) {
        echo "<p>An error occurred.</p>";

    // ensure a safe filename
    $name = preg_replace("/[^A-Z0-9._-]/i", "_", $myFile["name"]);

    // don't overwrite an existing file
    $i = 0;
    $parts = pathinfo($name);
    while (file_exists(UPLOAD_DIR . $name)) {
        $name = $parts["filename"] . "-" . $i . "." . $parts["extension"];

    // preserve file from temporary directory
    $success = move_uploaded_file($myFile["tmp_name"],
        UPLOAD_DIR . $name);
    if (!$success) { 
        echo "<p>Unable to save file.</p>";

    // set proper permissions on the new file
    chmod(UPLOAD_DIR . $name, 0644);
I pasted all my PHP code although right now i'm just working with the print PHP code to get a response, I am sure there are many things (besides security checking) with my upload php code. Any help with where the issue is to get this image upload situation working would be great as then I can work on my DRAG & DROP API