jQuery Onchange / onfocus Auswahlbox ein Bild anzuzeigen?

StackOverflow https://stackoverflow.com/questions/984484

Frage

Ich brauche Hilfe ein jQuery-Plugin zu finden, die mir erlaubt, aus einer Auswahlliste von Bildern eine Bildvorschau angezeigt werden - onfocus / Onchange ..

Beispiel: 

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

hat über so etwas wie dies jemand kommen? Ich habe ohne Erfolg für sie versucht, die Suche ..

Danke!

War es hilfreich?

Lösung

Ich bin mir nicht sicher, dass Sie benötigen ein Plugin um damit umzugehen: 

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

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

Andere Tipps

Ich glaube nicht, es ist ein Plugin für diese, aber es ist ziemlich trivial zu tun „von Hand“ 

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

Sie sollten eine Bestätigung für nicht vorhandene Bilder und solche hinzufügen. Ihre Ergebnisse können variieren. etc.

Haben Sie wirklich brauchen ein Plugin?

Wäre etwas Einfaches wie unten Arbeit? 

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

Alternative Verfahren mit AJAX. Ich habe es nicht getestet, aber googeln über das Thema. Hier sind einige Hinweise:

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

Server-Seite 

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

angezeigten Anzeigeninhalt von Respose.WriteFile () / Response.ContentType

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

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

Ich teile hier reine JavaScript-Version Bild mit Drop-Down zu ändern: - 

<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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top