Upload de imagens via Ajax

Boa tarde a todos, estou com um problema.

uso um script para upload de imagens via drag-and-drop ou selecao pelo campod e arquivo.

o codigo é:

var dropbox, preview;

function init() {
 preview = document.getElementById("preview");
 dropbox = document.getElementById("dropbox");
 window.addEventListener("dragenter", dragenter, true);
 window.addEventListener("dragleave", dragleave, true);
 dropbox.addEventListener("dragover", dragover, false);
 dropbox.addEventListener("drop", drop, false);
}

function dragenter(e) {
 e.preventDefault();
 dropbox.setAttribute("dragenter", true);
}

function dragleave(e) {
 dropbox.removeAttribute("dragenter");
}

function dragover(e) {
 e.preventDefault();
}

function drop(e) {
 e.preventDefault();
 var dt = e.dataTransfer;
 var files = dt.files;
 dropbox.removeAttribute("dragenter");

 handleFiles(files);
}

function handleFiles(files) {
 for (var i = 0; i < files.length; i++) {
 var file = files[i];
 var imageType = /image.*/;

 if (!file.type.match(imageType)) continue;

 var img = document.createElement("img");
 img.classList.add("obj");
 img.file = file;
 preview.appendChild(img);
 var reader = new FileReader();
 reader.onloadend = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
 reader.readAsDataURL(file);
 }
 parent.confirmImg = 1;

}

function FileUpload(img, bin) {
 this.ctrl = createThrobber(img);
 var xhr = new XMLHttpRequest();

 var self = this;
 xhr.upload.addEventListener("progress", function(e) {
 if (e.lengthComputable) {
 var percentage = Math.round((e.loaded * 100) / e.total);
 self.ctrl.update(percentage);
 }
 }, false);

 xhr.upload.addEventListener("load", function(e){
 self.ctrl.update(100);
 var canvas = self.ctrl.ctx.canvas;
 canvas.parentNode.removeChild(canvas);
 }, false);

 xhr.open("POST", "fotos.php?bin="+bin, true);
 xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
 //xhr.setRequestHeader('Content-Type','text/xml');
 //xhr.setRequestHeader('encoding','ISO-8859-1');
 //xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 //xhr.setRequestHeader('Content-length', bin.length );
 xhr.sendAsBinary(bin);
 xhr.onreadystatechange = function(){
 if(xhr.readyState==4){
 document.getElementById('teste').innerHTML = xhr.responseText;
 }
 }
}

function sendFiles() {
 parent.confirmImg = 0;
 var imgs = document.querySelectorAll(".obj");
 for (var i = 0; i < imgs.length; i++) {
 var reader = new FileReader();
 reader.onloadend = (function(aImg) { return function(e) { new FileUpload(aImg, e.target.result); }; })(imgs[i]);
 reader.readAsBinaryString(imgs[i].file);
 }

}

function createThrobber(img) {
 var x = img.x;
 var y = img.y;

 var canvas = document.createElement("canvas");
 preview.appendChild(canvas);
 canvas.width = img.width;
 canvas.height = img.height;
 var size = Math.min(canvas.height, canvas.width);
 canvas.style.top = y + "px";
 canvas.style.left = x + "px";
 canvas.classList.add("throbber");
 var ctx = canvas.getContext("2d");
 ctx.textBaseline = "middle";
 ctx.textAlign = "center";
 ctx.font = "15px monospace";
 ctx.shadowOffsetX = 0;
 ctx.shadowOffsetY = 0;
 ctx.shadowBlur = 14;
 ctx.shadowColor = "white";

 var ctrl = {};
 ctrl.ctx = ctx;
 ctrl.update = function(percentage) {
 var ctx = this.ctx;
 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 ctx.fillStyle = "rgba(0, 0, 0, " + (0.8 - 0.8 * percentage / 100)+ ")";
 ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 ctx.beginPath();
 ctx.arc(ctx.canvas.width / 2, ctx.canvas.height / 2,
 size / 6, 0, Math.PI * 2, false);
 ctx.strokeStyle = "rgba(255, 255, 255, 1)";
 ctx.lineWidth = size / 10 + 4;
 ctx.stroke();
 ctx.beginPath();
 ctx.arc(ctx.canvas.width / 2, ctx.canvas.height / 2,
 size / 6, -Math.PI / 2, (Math.PI * 2) * (percentage / 100) + -Math.PI / 2, false);
 ctx.strokeStyle = "rgba(0, 0, 0, 1)";
 ctx.lineWidth = size / 10;
 ctx.stroke();
 ctx.fillStyle = "white";
 ctx.baseLine = "middle";
 ctx.textAlign = "center";
 ctx.font = "10px monospace";
 ctx.fillText(percentage + "%", ctx.canvas.width / 2, ctx.canvas.height / 2);
 }
 ctrl.update(0);
 return ctrl;
}

window.addEventListener("load", init, true);

function log(msg) {
 dump(">>> " + msg + "\n");
}

só que meu arquivo PHP não identifica a variável "bin" enviada via POST que é a imagem em binário...

o código php é esse

<?

//header("content-type: image/jpeg");

$file = $_POST['bin'];
echo $file;
$tamanhos = getimagesize($file);

$largura_foto = $tamanhos[0];//LARGURA
$altura_foto = $tamanhos[1];//ALTURA

 $new_w = 100;
 $new_h = 100;

$dst_img = imagecreatetruecolor(100,100);
$src_img = imagecreatefromjpeg($file);
imagecopyresized($dst_img,$src_img,0,0,0,0,$new_w,$new_h,$largura_foto,$altura_foto);
imagejpeg($dst_img,'teste.jpg',100);
copy($dst_img,'teste.jpg');

?>

Alguem poderia me ajudar?

Obrigado