Trying to upload images without refreshing page with javascript, not working

Question

I am trying to upload images to my server via an html-form without refreshing the page. My problem is the files arent getting uploaded and I cant figure out why.

Javascript code:

function uploadFiles(event) {
var fileSelect = document.getElementById('file');
var files = fileSelect.files;
var formData = new FormData();

for (var i = 0; i < files.length; i++) {
    var file = files[i];
    if (!file.type.match('image.*')) {
        alert("File: " + file.name + " is not an image and will not be uploaded.");
        continue;
    }
    formData.append('images[]', file, file.name);
}

var xhr = new XMLHttpRequest();
xhr.open('POST', '../htdocs/Php/upload_file.php', true);
xhr.onload = function () {
  if (xhr.status === 200) {
    // File(s) uploaded.
      alert('files uploaded');
  } else {
    alert('An error occurred!');
  }
};
xhr.send(formData);
}

HTML code:

<form action="../htdocs/Php/upload_file.php"  method="post" enctype="multipart/form-data">
     <input type="file" name="images[]" id="file" onchange="uploadFiles()"  multiple required />
</form>

PHP code:

$numberOfFiles = count($_FILES['images']['name']);

for($id = 0; $id < $numberOfFiles; $id++)
{
if (!file_exists("../UploadedImages/" . $_FILES["images"]["name"][$id])) {
    move_uploaded_file($_FILES["images"]["name"][$id], "../UploadedImages/" . $_FILES["images"]["name"][$id]);
}
}

Answer 1

Looks like your JavaScript is correct, but your PHP needs some attention. I modified your php so that it first check to see if $_FILES were passed. Then where you had some incorrect logic was in your !file_exists() statement and how you move and check the file name.

To check if a file exists, and to move the file you need to use $_FILES['images']['tmp_name']. The 'name' attribute is just the name of the file uploaded, not the physical file uploaded to the browser.

To really test your code, use firebug and look at the console. It should return a line that you can expand and look at what was posted and what was returned.

Here is an example, the following code i gave you returns this:

C:\filepath\binaries\tmp\phpDB53.tmp Was Succesuflly uploaded 
C:\filepath\binaries\tmp\phpDB54.tmp Was Succesuflly uploaded 
C:\filepath\binaries\tmp\phpDB55.tmp Was Succesuflly uploaded 
C:\filepath\binaries\tmp\phpDB56.tmp Was Succesuflly uploaded 

NOTE: Double check that the files paths are absolutely correct. When checking firebug console, the php file will also return file errors as well, given that you have php error reporting on.

//Check if files were passed through to your ajax page
if(isset($_FILES)) {

    $numberOfFiles = count($_FILES['images']['name']);

        for($id = 0; $id < $numberOfFiles; $id++)
        {
            if (file_exists($_FILES["images"]["tmp_name"][$id])) {
                move_uploaded_file($_FILES["images"]["tmp_name"][$id], $_FILES["images"]["name"][$id]);
                echo $_FILES["images"]["tmp_name"][$id] . " Was Succesuflly uploaded \r\n ";
            } else {
                echo "file didnt exists " . $_FILES["images"]["tmp_name"][$id] . "\r\n ";
            }


        }

} else {

    //No Files were passed through
    echo "no files passed through";

}

exit();

Hopefully that answers your question.