Imagen A Cadena

dannce4life · #1 (**permalink**) 15/11/2009, 21:16

Buenas Buenas.

Primero que nada, siempre quiero agradecerles por aunque sea entrar a este tema.

Y sin más rodeos voy al problema.

Como sabemos, no se puede enviar un archivo a través de XMLHttpRequest, pero que tal si descomponemos la imagen en una cadena de texto y la pasamos como parámetro POST para luego guardarla en un campo BLOB desde PHP.

Se podrá hacer esto?
Descomponer la imagen en un string?
La verdad de AJAX / JS no entiendo mucho. Por esto recurrí al foro.

David · #2 (**permalink**) 16/11/2009, 05:29

El principal problema es que no lograrás acceder al contenido de ningún archivo que esté del lado del cliente.

Panino5001 · #3 (**permalink**) 16/11/2009, 06:09

Salvo en Firefox 3, que permite hacer cosas como esta:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Documento sin t&iacute;tulo</title> 
</head> 
 
<body><form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> 
  <input type="file" name="file" onchange="document.getElementById('prev').style.display='inline';document.getElementById('prev').src='data:'+this.files.item(0).getAsDataURL();document.getElementById('fs').innerHTML=' '+(parseInt(this.files.item(0).fileSize)/1024).toFixed(2)+' kb';document.getElementById('log').innerHTML=this.files.item(0).getAsDataURL()" /> 
  <img id="prev" src="" width="85"  style="display:none;" /><span id="fs"></span> 
</form>   
<div id="log"></div> 
</body> 
</html>

Panino5001 · #4 (**permalink**) 16/11/2009, 22:28

Agrego: Este otro camino funciona sin problemas (aunque sólo localmente) en Firefox, Safari y Chrome:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Documento sin t&iacute;tulo</title> 
<script> 
function getBase64Image(v) { 
    var img=document.body.appendChild(document.createElement('img')).src=v; 
    img.onload=function(){ 
        var canvas = document.createElement("canvas"); 
        canvas.width = img.width; 
        canvas.height = img.height; 
        var ctx = canvas.getContext("2d"); 
        ctx.drawImage(img, 0, 0); 
        var dataURL = canvas.toDataURL("image/png"); 
        document.getElementById('log').innerHTML='<img src="'+dataURL+'" />'; 
    } 
} 
 
</script> 
</head> 
 
<body> 
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> 
  <label for="file"></label> 
  <input type="file" name="file" id="file" onchange="getBase64Image(this.value)" /> 
</form> 
<div id="log"></div> 
</body> 
</html>

dannce4life · #5 (**permalink**) 17/11/2009, 09:48

Muy buen aporte, lastima para los usuarios de IE y Opera