Uploading files with XMLHttpRequest - php

Question

I am new to XMLHttpRequest and I have been using it as a AJAX file uploader using JavaScript's FormData().
The problem I am having is that it seems to upload fine, although I think it is not sending it to the right PHP file or my PHP is wrong because nothing is displayed in the folder where pictures should be.
At the moment, I don't know how to view the returned html data
JavaScript:
$("#form").submit(function(event) {
event.preventDefault();
event.stopPropagation();
var form = $(this);
var file = document.getElementById("file");
var data = new FormData();
var onerror = function(event) {
alert("An error occoured!");
}
var onprogressupdate = function(event) {
if(event.lengthComputable) {
var percent = event.loaded / event.total * 100;
$("#progress").html(percent+"%");
}
}
var onreadystatechange = function(event) {
if(request.status == 200 && request.readyState == 4) {
alert("Uploaded!");
$("#progress").hide();
$("#progress").html("");
}
else {
alert("Alternative state and/or status");
console.log("state: " + request.state);
console.log("readyState: " + request.readyState);
}
}
for(var i = 0; i < file.files.length; i++)
data.append('file[]', file.files[i]);
$("#progress").show();
$("#progress").html("Uploading files...");
var request = new XMLHttpRequest();
request.upload.addEventListener("error", onerror);
request.upload.addEventListener("progress", onprogressupdate);
request.upload.addEventListener("readystatechange", onreadystatechange);
request.open("post", "upload.php");
request.setRequestHeader("Content-type", "multipart/form-data");
request.send(data);
});
Upload page
<?php
if(isset($_FILES["file"])) {
$f = $_FILES["file"];
$dir = "data";
if(!file_exists($dir))
mkdir($dir);
foreach($f["name"] as $k => $name) {
$file = $dir."/".$name;
if($f["error"][$k] == 0 && move_uploaded_file($f["tmp_name"][$k], $file)) {
$uploaded[] = $file;
}
}
die(json_encode($uploaded));
}
?>

Answer 1

Don't set the content type, its set automatically.

Answer 2

Create your FormData object with form element you want to send:
var data = new FormData(this);
instead of
var data = new FormData();
The syntax of the FormData is
new FormData (optional HTMLFormElement form)
without the argument, it is empty, see the reference.