Upload de imagens via Ajax

[Bentes 0]

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

[William Bruno 1501]

faltou o header, pro POST funcionar

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

[Bentes 0]

Não deu cara... :(

ja tinha tentado com o header, ta ate comentado no codigo

 

estou recebendo esta mensagem no PHP

 

Notice: Undefined index: bin in A:\htdocs\imobicenter\temp\imoveis\fotos.php on line 4

Warning: getimagesize() [function.getimagesize]: Filename cannot be empty in A:\htdocs\imobicenter\temp\imoveis\fotos.php on line 6

Warning: imagecreatetruecolor() [function.imagecreatetruecolor]: Invalid image dimensions in A:\htdocs\imobicenter\temp\imoveis\fotos.php on line 13

Warning: imagecreatefromjpeg() [function.imagecreatefromjpeg]: Filename cannot be empty in A:\htdocs\imobicenter\temp\imoveis\fotos.php on line 14

Warning: imagecopyresized(): supplied argument is not a valid Image resource in A:\htdocs\imobicenter\temp\imoveis\fotos.php on line 15

Warning: imagejpeg(): supplied argument is not a valid Image resource in A:\htdocs\imobicenter\temp\imoveis\fotos.php on line 16

 

o PHP não reconhece as variáveis enviadas pelo ajax, se eu enviar assim:

xhr.open("GET", "fotos.php?bin="+bin, true);

e pegar via GET, ele até funciona mas so pega o inicio da variável.

A variável está correta pois mando dar um alert() depois do ajax e me exibe o codigo binario da imagem

 

o script pode ser visto funcionando aqui: http://demos.hacks.mozilla.org/openweb/uploadingFiles/

 

consegui enviar mas o código que recebo é: (colei so uma parte)

ZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNFdHSVJYaHBaZ0FBU1VrcUFBZ0FBQUFMQUE0QkFnQWdBQUFBa2dBQUFBOEJBZ0FGQUFBQXNnQUFBQkFCQWdBSkFBQUF1QUFBQUJJQkF3QUJBQUFBQVFBQUFCb0JCUUFCQUFBQXdnQUFBQnNCQlFBQkFBQUF5Z0FBQUNnQkF3QUJBQUFBQWdBQUFESUJBZ0FVQUFBQTBnQUFBQk1DQXdBQkFBQUFBZ0FBQUdtSEJBQUJBQUFBQWdFQUFLWEVCd0FjQUFBQTVnQUFBRnBCQUFBZ0l

 

não consigo converter isso pra imagem... se alguem puder me ajudar....