jQuery onchange/onfocus Seleccione el cuadro para mostrar una imagen?

Necesito un poco de ayuda para encontrar un plugin de jQuery, que me permitirá mostrar una previsualización de la imagen a partir de una lista de selección de imágenes - onfocus/onchange ..jQuery onchange/onfocus Seleccione el cuadro para mostrar una imagen?

Ejemplo:

<select name="image" id="image" class="inputbox" size="1"> 
    <option value=""> - Select Image - </option> 
    <option value="image1.jpg">image1.jpg</option> 
    <option value="image2.jpg">image2.jpg</option> 
    <option value="image3.jpg">image3.jpg</option> 
</select> 

<div id="imagePreview"> 
    displays image here 
</div>

Alguien ha encontrado algo parecido ¿esta? He intentado buscarlo en vano ...

¡Gracias!

Fuente

2009-06-12 SoulieBaby

no estoy seguro de que necesita un plugin para hacer frente a esto:

$(document).ready(function() { 
    $("#image").change(function() { 
     var src = $(this).val(); 

     $("#imagePreview").html(src ? "<img src='" + src + "'>" : ""); 
    }); 
});

Fuente

2009-06-12 00:37:46

muchas gracias, ¡exactamente lo que quería! :) – SoulieBaby

Gracias, pero también hace lo mismo que ya he hecho. Algo más ...? –

+1 Elegante y simple. – Rap

No creo que hay un plugin para esto, pero es bastante trivial que hacer "a mano"

$(document).ready(function(){ 
    $('#image').change(function(){ 
      $('#imagePreview').html('<img src="'+$('#image').val()+'"/>'); 
    }); 
});

Debe agregar una validación para imágenes inexistentes y cosas por el estilo. Su experiencia puede ser diferente. etc.

Fuente

2009-06-12 00:45:00 codehead

¿Realmente necesitas un complemento?

¿Funcionaría algo simple como a continuación?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>JQuery Image</title> 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#image").change(function() { 
    $("#imagePreview").empty(); 
    if ($("#image").val()!=""){ 
     $("#imagePreview").append("<img src=\"" + $("#image").val() + "\" />"); 
    } 
    else{ 
     $("#imagePreview").append("displays image here"); 
    } 
    }); 
}); 
</script> 
</head> 
<body> 
<select name="image" id="image" class="inputbox" size="1"> 
    <option value=""> - Select Image - </option> 
    <option value="image1.jpg">image1.jpg</option> 
    <option value="image2.jpg">image2.jpg</option> 
    <option value="image3.jpg">image3.jpg</option> 
</select> 

<div id="imagePreview"> 
    displays image here 
</div> 


</body> 
</html>

Fuente

2009-06-12 00:46:00 tschaible

Método alternativo con AJAX. No lo he probado, pero busqué en Google el tema. Aquí están algunas notas:

http://forums.asp.net/t/1107236.aspx

del lado del servidor

response.contentType('image/jpeg'); 
response.binaryWrite(imageBytes);

Displaying ad content from Respose.WriteFile()/ Response.ContentType

http://www.dotnetperls.com/response-writefile

Response.WriteFile usage:   10.680 s 
Byte[] cache, Response.BinaryWrite: 0.094 s

Fuente

2011-10-01 11:33:54

Estoy compartiendo aquí la versión de javascript pura para cambiar la imagen usando el menú desplegable: -

<html> 
<head> 
<title></title> 
<script language="JavaScript" type="text/javascript"> 
var Path='http://www.domainname.com/images/'; 
function CngColor(obj){ 
index=obj.selectedIndex; 
if (index<1){ return; } 
document.getElementById('Img1').src=Path+obj.options[index].value; 
} 

</script></head> 
<body> 

<select onchange="CngColor(this);" > 
<option >Select</option> 
<option value="Zero.gif" >Zero</option> 
<option value="One.gif" >1</option> 
<option value="Two.gif" >2</option> 
<option value="Three.gif" >3</option> 
<option value="Four.gif" >4</option> 
</select> 

<img id="Img1" src="http://www.domainname.com/images/Blank.gif" width=100 height=100 > 

</body> 
</html>

Fuente

2012-11-23 12:39:52

esto no está funcionando en IE ... alguna idea? –

jQuery onchange/onfocus Seleccione el cuadro para mostrar una imagen?

Respuesta

Cuestiones relacionadas