Cambiar imagen de fondo div

[clinisbut]

Tengo un input=file el qual voy a usar para seleccionar una imagen.
Le he dado un evento onChange que llama a una función la qual deberia canviar la imagen de fondo que le he dado a un div con id="foto_view", de tal manera que cuando el usuario haya seleccionado la imagen, el fondo de este div se actualize mostrando la imagen que ha marcado, pero no hay manera.
Lo unico que he conseguido es que el div se vea de color blanco

Mi codigo es el siguiente

Código:

function foto(img)
{   document.getElementById("foto_view").style.backgroundImage="url(\""+img+"\")";
}

Edito: he puesto esto para ver que ruta le pone al backgroundImage:
alert(document.getElementById("foto_view").style.b ackgroundImage);
Y me pone la ruta sin las antibarras "/" (ej: en vez de C:/carpeta/foto.jpg pone C:carpeta foto.jp)

[caricatos]

Hola clinisbut:

Por razones de seguridad mostrar imagenes de nuestro propio ordenador te puede dar más fallos de lo normal ... no te lo recomiendo...

Lo mejor es que uses fotos que estén en internet, y para eso te bastaría con un inputtype=text

Hace unos meses puse un tema parecido, y llegué a la conclusión que para ese objetivo hay que subir la imagen al servidor.

Saludos

[angsanchez]

Hola, clinisbut, caricatos
He dado con una solución que funciona en local (no la he probado en servidor).

1) Sobraban las comillas dentro de url()
2) He reescrito el nombre del archivo que devuelve el input type=text, para que sea una URL correcta.
3) 2 modoalidades: como imagen y como fondo de capa. Hay una limitación en que las dimensiones de ambas deben venir fijas.

Código:

<script type="text/javascript">
function foto(img)
{	var arch = "file:///" + img.replace(/\\/g,"/")
	document.images["foto_view2"].src=arch
	document.getElementById("foto_view").style.backgroundImage = "url("+arch+")"
}
</script>
Elige imagen<input type="file" onChange="foto(this.value)" name="archi">
<br>
Como imagen: <img name="foto_view2" width="200" height="100" src="blanco.gif">
<br>
Como capa: <div id="foto_view" style="width:200px; height:100px;"></div>
</form>

Necesitarás una imagen en blanco para que se muestre inicialmente.

[angsanchez]

He conseguido ajustar el tamaño:

Código:

<form>
<script type="text/javascript">
function foto(img)
{	var arch = "file:///" + img.replace(/\\/g,"/")
	arch = arch.replace(/ /g,"%20")
	document.getElementById("foto_view").style.backgroundImage = "url("+arch+")"
	var imag = new Image()
	imag.src = arch
	document.getElementById("foto_view").style.width = imag.width + "px"
	document.getElementById("foto_view").style.height = imag.height + "px"
}
</script>
Elige imagen<input type="file" onChange="foto(this.value)">
<div id="foto_view" style="width:2px; height:2px;"></div>
</form>

Falla algunas veces, no sé muy bien por qué; quizás dependa del nombre y ruta; he filtrado los espacios y ha ayudado, pero aún algunos fallan.

[caricatos]

Hola angsanchez:

Ese método es como está en las FAQs... Mira este otro tema, donde hemos hablado algo el tema: http://www.forosdelweb.com/f13/mostrar-imagen-local-343430/

Saludos

[angsanchez]

Bueno, veo que la cosa es complicada. Y yo que estaba tan contento...
En local me funciona tanto en Ff 1.0.7 como en IE6 -salvo esos fallos esporádicos. En el servidor, falla estrepitosamente en Ff pero funciona en IE.

Me rindo

[clinisbut]

Aver... es que hay una cosa que no he explicado... esto es para una "aplicacion" que funcionará unicamente en local, por eso el usar imagenes locales unicamente.

Aún no he probado el codigo, en cuanto pueda os cuento
Muchas gracias de todas maneras!