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