jQuery onchange/onfocus wybierz pole, aby wyświetlić obraz?

Potrzebuję pomocy w znalezieniu plugin jQuery, który pozwoli mi, aby wyświetlić podgląd obrazu z wybranej listy zdjęć - onfocus/onchange ..jQuery onchange/onfocus wybierz pole, aby wyświetlić obraz?

Przykład:

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

ktoś natknąć się coś podobnego to? Próbowałem go wyszukać bezskutecznie.

Dziękujemy!

Źródło

2009-06-12 SoulieBaby

Nie jestem pewien, potrzebujesz wtyczki do czynienia z tym:

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

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

Źródło

2009-06-12 00:37:46

dziękuję muchly, dokładnie to, co chciałem !! :) – SoulieBaby

Dzięki, ale też robi to samo, co już zrobiłem. Coś jeszcze ...? –

+1 Elegancki i prosty. – Rap

Nie sądzę, nie ma wtyczki do tego, ale to jest dość trywialne robić „ręcznie”

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

Powinieneś dodać weryfikację dla nieistniejących obrazów i tym podobnych. Twój przebieg może się różnić. itp.

Źródło

2009-06-12 00:45:00 codehead

Czy naprawdę potrzebujesz wtyczki?

Czy coś prostszego, jak poniżej, zadziała?

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

Źródło

2009-06-12 00:46:00 tschaible

Alternatywna metoda z AJAX. Nie testowałem tego, ale szukałem go w Google na ten temat. Oto kilka uwag:

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

po stronie serwera

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

Źródło

2011-10-01 11:33:54

Dzielę się tutaj czystą wersję JavaScript, żeby zmienić obraz za pomocą listy rozwijanej: -

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

Źródło

2012-11-23 12:39:52

to nie działa na IE .. jakiś pomysł? –

jQuery onchange/onfocus wybierz pole, aby wyświetlić obraz?

Odpowiedz

Powiązane problemy