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

Question

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

Potrzebuję pomocy w znalezieniu wtyczki jQuery, która pozwoli mi wyświetlić podgląd obrazu z wybranej listy obrazów-onfocus / onchange..

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>

Czy ktoś natknął się na coś takiego? Próbowałem szukać go bez skutku.. Dziękuję!

9

jquery select jquery-plugins onchange onfocus

Author: SoulieBaby, 2009-06-12

Source

5 answers

Myślę, że nie ma do tego pluginu, ale dość trywialne jest robienie tego "ręcznie"

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

Powinieneś dodać walidację dla nieistniejących obrazów i takich. Przebieg może się różnić. itd.

4

Author: codehead,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-06-12 00:45:00

Czy naprawdę potrzebujesz wtyczki?

Czy coś prostego 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>

2

Author: tschaible,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-06-12 00:46:00

Alternatywna metoda z Ajaxem. Nie testowałem go, ale wygooglowałem na ten temat. Oto kilka uwag:

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

Po stronie serwera

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

Wyświetlanie treści reklamowych z Respose.WriteFile ()/ Response.ContentType

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

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

1

Author: Community,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 10:28:01

Udostępniam tutaj czystą wersję javascript, aby zmienić obraz za pomocą rozwijanego menu: -

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

0

Author: Sandeep Tawaniya,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-23 12:39:52

score 25 · Accepted Answer

Nie jestem pewien, czy potrzebujesz wtyczki, aby sobie z tym poradzić:

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

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

25

Author: Ben Blank,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-11-10 22:56:08