jQuery onchange/onfocus seleziona la casella per visualizzare un'immagine?

Ho bisogno di aiuto per trovare un plugin jQuery che mi permetterà di visualizzare un'anteprima immagine da un elenco selezionato di immagini - onfocus/onchange ..jQuery onchange/onfocus seleziona la casella per visualizzare un'immagine?

Esempio:

<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>

Qualcuno ha incontrato qualcosa di simile Questo? Ho provato a cercare inutilmente ..

Grazie!

fonte

2009-06-12 SoulieBaby

non sono sicuro avete bisogno di un plugin per affrontare questo:

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

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

fonte

2009-06-12 00:37:46

grazie molte, esattamente quello che volevo !! :) – SoulieBaby

Grazie, ma fa anche lo stesso che ho già fatto. Qualcos'altro ...? –

+1 Elegante e semplice. – Rap

Non credo che ci sia un plugin per questo, ma è abbastanza banale da fare "a mano"

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

È necessario aggiungere una convalida per immagini inesistenti e simili. Il tuo chilometraggio può variare. ecc.

fonte

2009-06-12 00:45:00 codehead

Hai davvero bisogno di un plug-in?

Sarebbe qualcosa di semplice come sotto funziona?

<!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>

fonte

2009-06-12 00:46:00 tschaible

Metodo alternativo con AJAX. Non l'ho provato, ma ho cercato l'argomento. Ecco alcune note:

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

lato server

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

fonte

2011-10-01 11:33:54

Sto condividendo qui pura versione javascript per cambiare immagine utilizzando il menu a discesa: -

<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>

fonte

2012-11-23 12:39:52

questo non funziona su IE .. qualche idea? –

jQuery onchange/onfocus seleziona la casella per visualizzare un'immagine?

risposta

Problemi correlati