Cargar imagenes desde el server obteniendo la ruta con ajax?

Albuss · #1 (**permalink**) 29/03/2013, 23:32

buenas!

Estoy probando a ver como consigo de forma asíncrona descargar una imagen alojada en una de las carpetas de mi servidor. El caso es este: Cuando un usuario sube una imagen al server, no guardo el mapa de bits (el archivo jpg en este caso) en la DB solo guardo la ruta de la imagen, la ruta de la carpeta donde se ubica dentro del server. La imagen la ubico dentro de na carpeta en el servidor.

Bien, "traer al frente" mediante Ajax esa ruta no tiene ningun problema, ahora la imagen es otra cosa, yo utilizo el elemento <img> y le adjunto un src, Mi intención es si solo teniendo la ruta, y adjuntandosela al src del elemento img, ¿html accedera de forma asincronica a la ubicaron y descargara la imagen?

de no ser así, ¿que alternativas tengo para no cargar un mapa de bit en binario en mi DB?

emprear · #2 (**permalink**) 30/03/2013, 00:55

No entiendo bien el objetivo, pero como ajax maneja texto, vas a tener que convertir la imagen, por ejemplo a base64

Código PHP:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
</head>
<body>
<div>
<?php
$origen = file_get_contents("gato.jpg");
$base64 = base64_encode($origen);
$img = "<img src='data:image/jpg;base64,$base64' alt='gato' title='gato' />";
echo $img;
?>
<br />
<img src="data:image/jpg;base64,<?php echo $base64; ?>" alt="gato2" title="gato2" />
</div>
 
<script>
var img = new Image();
img.src = 'data:image/jpg;base64,<?php echo $base64; ?>';
img.title = "gato3";
img.alt = "gato3";
document.body.appendChild( img );
</script>
</body>
</html>

Si la insertás en la bd, la tenés que poner en un campo blob, y la mostras con php recuperando el campo y pasando los headers correspondientes al mimeType de la imagen
Lo que ajax carga asincrónicamente son los datos que recibe, en definitiva una cadena de texto

SAludos

marlanga · #3 (**permalink**) 30/03/2013, 03:35

Cita:

Iniciado por Albuss

buenas!
¿html accedera de forma asincronica a la ubicaron y descargara la imagen[/B]?

var imagen= new Image();
imagen.src=RUTA_RECUPERADA_POR_AJAX;

Y la imagen se cargará asíncronamente (código no bloqueante).
Para saber cuándo se ha descargado, el objeto Image llamará a su método onload, que tienes que escribir tú:
imagen.onload=function(){ body.appenChild(imagen); };

Albuss · #4 (**permalink**) 30/03/2013, 05:22

Cita:

Iniciado por marlanga

var imagen= new Image();
imagen.src=RUTA_RECUPERADA_POR_AJAX;

Y la imagen se cargará asíncronamente (código no bloqueante).
Para saber cuándo se ha descargado, el objeto Image llamará a su método onload, que tienes que escribir tú:
imagen.onload=function(){ body.appenChild(imagen); };

Exacto!, es lo que pretendia, lo unico, una duda : ¿te refieres a agregarle un listener al contenedor o al objeto?

Albuss · #5 (**permalink**) 30/03/2013, 05:24

Cita:

Iniciado por emprear

....

SAludos

Emprear, sos groso, pero comprende que yo no baso mis HTML en PHP (es decir, el documento php que tiene escrito html), solo llamo a php cuando es necesario mediante ajax, mi html es puro HTML, salida .html no .php (no se si me entiendes)

marlanga · #6 (**permalink**) 30/03/2013, 06:17

Al objeto imagen. pero sólo si realmente te hace falta. La imagen cargará igual le pongas en onload o no se lo pongas.

emprear · #7 (**permalink**) 30/03/2013, 13:13

Cita:

Iniciado por Albuss

Emprear, sos groso, pero comprende que yo no baso mis HTML en PHP (es decir, el documento php que tiene escrito html), solo llamo a php cuando es necesario mediante ajax, mi html es puro HTML, salida .html no .php (no se si me entiendes)

@Albuss, si ese es el caso, evitá comentarios como este

Cita:

¿que alternativas tengo para no cargar un mapa de bit en binario en mi DB?

Eso implicaría php, mi tercer ejemplo además dice

Código:

<script>
var img = new Image();
img.src = 'data:image/jpg;base64,<?php echo $base64; ?>';
img.title = "gato3";
img.alt = "gato3";
document.body.appendChild( img );
</script>

simplemente en el img.src ponés la ruta, sigi sin ver la utilidad de buscar esa ruta con Ajax, lo cual, supongo, también harías con php, dado que la imagen, no deja de ser un nombre en el sistema de archivos.

Albuss · #8 (**permalink**) 30/03/2013, 15:40

Emprear, no me jodas, que yo sepa y tenga conocimientos de MONGO DB, no significa que empleé esa DB, no soy estúpido, cuando leo tus respuestas realmente pienso que crees que soy estupido, MONGO DB como cualquier base de datos no relacional, solo y realmente solo debe usarse cuando hay un flujo de datos ingente, nada mas. (strong data typing)

Estoy utilizando SQLserver, podría haber usado PostgreSQL para tratar con imagenes mas facilmente, se trabajar con mapas de bits en binario con SQLserver, pero no, no es lo que quiero, aquí estoy preguntando una cosa muy concreta,sobre JS, nada mas, no tiene nada que ver con la DB (solo una pequeña referencia para decir que no guardo el mapa de bits en esta si no en una carpeta dentro del server) y veo que marlanga es el único que ha "pillado" lo que estoy haciendo.

Por favor, no malinterpretes todos mis mensajes, ni tampoco los saques de contexto, hacer apología barata es muy fácil.

Ps. creo que guardar mapas de bits en binario en SQL (cualquiera) es un error. Pero eso ya es una opinión subjetiva propia.

Albuss · #9 (**permalink**) 30/03/2013, 15:54

Cita:

Iniciado por marlanga

Al objeto imagen. pero sólo si realmente te hace falta. La imagen cargará igual le pongas en onload o no se lo pongas.

Una pregunta extra, como maneja el html para hacer eso de forma asincronica? realmente desconozco como trabaja en estos casos.

emprear · #10 (**permalink**) 30/03/2013, 16:02

Cita:

Iniciado por Albuss

de no ser así, ¿que alternativas tengo para no cargar un mapa de bit en binario en mi DB?

Hoy debés estar medio dormido, que mongo ni mongo, preguntás como meter un binario en una BD. y eso es lo que te señale. En que momento hasta ahora mencionaste que sistema estás usando? Yo adivino no soy
Tomate un tranquilizante, releé todo el post con "objetividad", si es que te queda alguna y te vas a dar cuenta de lo que hablo, me parece que se te están mezclando los posts (http://www.forosdelweb.com/f13/json-...8/#post4397809), ahi si hiciste una referencia, pero en este NO.
Y bajá el tonito, ese "no me jodas" está demás, ¿en que momento te traté de estúpido?, recién ahora se me ocurriría decir que está medio "paranoico" en todo caso
Voy a pedir que creen un subForo especial para vos y tu amigo, asi nos evitamos "seguir ofendiéndolos con nuestras respuestas"

Albuss · #11 (**permalink**) 30/03/2013, 17:58

Emprear, metes la pulla por causalidad o practicas para joder a la gente? , si el tema lo creeé yo , yo sabre que estoy preguntando, deja de joder, creo que he sido respetusoso contigo a pesar de que me estas haciendo la pulla. ¿a que viene esa cita referente a otro tema?, ¿que tiene que ver con este tema? ¿por que sigues con algo que dije explicitamente que no me aportaba nada?, lo que yo hago con las imagenes es meterlas en una carpeta dentro del server, creo que es facil de entender.

Este tema, mi pregunta, lo que yo estoy tratando ahora, no trata sobre DB, es una pregunta solamente de JS, ya van dos veces que lo intento aclarar, no se, igual no hablo tu idioma. La pregunta resumida seria asi : ¿como hace HTML para cargar asincronicamente un src de un elemento img asignado mediante JS (el src se saca con ajax via php de la db, es decir la ruta)? , ya esta, simple ,¿ no crees?

Para YA , te consideraba alguien serio. Yo puedo usar la ironia, pero considero que nunca he faltado ni en formas ni en modales al respeto de nadie, si tu me malinterpretas (lo haces contunuamente) es tu problema, si no sabes tratar con alguien que difiere de lo que tu dices de una forma cordial, no entres ni te metas en la discusión, Somos personas adultas, creo.

Ps. diferir, discrepar, no aceptar, una opinion , en mi pais , en mi idioma y en mi forma de pensar no se considera ninguna falta de respeto, las formas y la interpretaciones corren a cargo del oyente, si no eres digno de cuartar esto, no trates mas conmigo, simple.

dontexplain · #12 (**permalink**) 30/03/2013, 23:23

El navegador internamente hace peticiones HTTP de la siguiente forma:

Establece un socket TCP con la máquina de destino. Internamente, el sistema a 3 pasos (SYN,SYN-ACK,ACK) a nivel de red. Si es una dirección DNS primero la busca en la caché y si no existe realiza una petición mediante UDP al servidor DNS.
Una vez establecido el socket, realiza una petición HTTP y establece un listener interno a la escucha de la respuesta.
El servidor remoto, en cualquier momento, responde con una respuesta HTTP con las cabeceras asignadas (con el content-type a imagen) y el body de la respuesta con el contenido binario de la imagen.

Ajax no es el navegador, es una herramientilla que se proporciona para realizar peticiones asíncronamente, pero es una herramienta, que no tiene el potencial de las funciones internas del navegador. Para mostrar imágenes mediante ajax se hace lo que explica emprear, se usa base64, que es texto, la limitación propia de ajax.

La explicación a esto es evidente, ajax maneja texto, si viste alguna vez una tabla de carácteres ascii verás que no todos son imprimibles como texto sino que hay muchos carácteres que no se pueden imprimir y que forman parte natural del contenido de una imagen. Por ejemplo, marqué en amarillo la parte donde terminan las cabeceras (retorno de carro - nueva línea = 0d - 0a x 2) y comienza el contenido de la imagen, verás que hay caracteres que no se pueden imprimir (aparecen como un punto a la derecha), incluso caracteres nulos.

Petición HTTP:

Código HTTP:

Ver originalGET /hphotos-ak-ash3/550081_405979536099703_254407733_n.jpg HTTP/1.1
Host: sphotos-g.ak.fbcdn.net
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.43 Safari/537.31
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: es-ES,es;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

Respuesta a la petición. (200)

Código HTTP:

Ver originalHTTP/1.1 200 OK
Content-Type: image/jpeg
Last-Modified: Fri, 01 Jan 2010 00:00:00 GMT
X-Backend: hs833.ash3
X-BlockId: 550081
X-Object-Type: PHOTO
Content-Length: 63937
Date: Sun, 31 Mar 2013 05:09:34 GMT
Connection: keep-alive
Cache-Control: max-age=1209600
 
......JFIF..............*.....ICC_PROFILE.......lcms....mntrRGB XYZ .........).9acspAPPL...................................-lcms...............................................
desc.......^cprt...\....wtpt...h....bkpt...|..

Albuss · #13 (**permalink**) 31/03/2013, 01:06

gracias por tu respuesta dontexplain, voy a tomarme un tiempo para poder comprender toda la info que has puesto.