sTiLL-iLL/handle_file_upload.php

## handle_file_upload.php
<?php
$fileName = $_FILES['afile']['name'];
$fileType = $_FILES['afile']['type'];
$fileContent = file_get_contents($_FILES['afile']['tmp_name']);
$dataUrl = 'data:' . $fileType . ';base64,' . base64_encode($fileContent);

$json = json_encode(array(
  'name' => $fileName,
  'type' => $fileType,
  'dataUrl' => $dataUrl,
  'username' => $_REQUEST['username'],
  'accountnum' => $_REQUEST['accountnum']
));

echo $json;
?>

## xhr.send(FormData).html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>xhr.send(FormData) Example</title>
</head>
<body>

<input type="file" name="afile" id="afile" accept="image/*"/>

<script>
document.querySelector('#afile').addEventListener('change', function(e) {
  var file = this.files[0];

  var fd = new FormData();
  fd.append("afile", file);
  // These extra params aren't necessary but show that you can include other data.
  fd.append("username", "Groucho");
  fd.append("accountnum", 123456);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'handle_file_upload.php', true);

  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      var percentComplete = (e.loaded / e.total) * 100;
      console.log(percentComplete + '% uploaded');
    }
  };

  xhr.onload = function() {
    if (this.status == 200) {
      var resp = JSON.parse(this.response);

      console.log('Server got:', resp);

      var image = document.createElement('img');
      image.src = resp.dataUrl;
      document.body.appendChild(image);
    };
  };

  xhr.send(fd);
}, false);
</script>
<!--[if IE]>
<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<script>CFInstall.check({mode: 'overlay'});</script>
<![endif]-->
</body>
</html>
	<?php
	$fileName = $_FILES['afile']['name'];
	$fileType = $_FILES['afile']['type'];
	$fileContent = file_get_contents($_FILES['afile']['tmp_name']);
	$dataUrl = 'data:' . $fileType . ';base64,' . base64_encode($fileContent);

	$json = json_encode(array(
	'name' => $fileName,
	'type' => $fileType,
	'dataUrl' => $dataUrl,
	'username' => $_REQUEST['username'],
	'accountnum' => $_REQUEST['accountnum']
	));

	echo $json;
	?>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
	<title>xhr.send(FormData) Example</title>
	</head>
	<body>

	<input type="file" name="afile" id="afile" accept="image/*"/>

	<script>
	document.querySelector('#afile').addEventListener('change', function(e) {
	var file = this.files[0];

	var fd = new FormData();
	fd.append("afile", file);
	// These extra params aren't necessary but show that you can include other data.
	fd.append("username", "Groucho");
	fd.append("accountnum", 123456);

	var xhr = new XMLHttpRequest();
	xhr.open('POST', 'handle_file_upload.php', true);

	xhr.upload.onprogress = function(e) {
	if (e.lengthComputable) {
	var percentComplete = (e.loaded / e.total) * 100;
	console.log(percentComplete + '% uploaded');
	}
	};

	xhr.onload = function() {
	if (this.status == 200) {
	var resp = JSON.parse(this.response);

	console.log('Server got:', resp);

	var image = document.createElement('img');
	image.src = resp.dataUrl;
	document.body.appendChild(image);
	};
	};

	xhr.send(fd);
	}, false);
	</script>
	<!--[if IE]>
	<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
	<script>CFInstall.check({mode: 'overlay'});</script>
	<![endif]-->
	</body>
	</html>