JQuery Onchange / OnFocus حدد مربع لعرض صورة؟

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

سؤال

أحتاج إلى بعض المساعدة في العثور على مكون إضافي مسج يسمح لي بعرض معاينة صورة من قائمة مختارة من الصور - OnFocus / Onchange ..

مثال:

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

لديه أي شخص يأتي عبر شيء مثل هذا؟ لقد حاولت البحث عنها دون جدوى ..

شكرًا لك!

هل كانت مفيدة؟

المحلول

لست متأكدا من أنك بحاجة إلى مكون إضافي للتعامل مع هذا:

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

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

نصائح أخرى

لا أعتقد أن هناك مكون إضافي لهذا، لكنه تافهة إلى حد ما للقيام "باليد"

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

يجب عليك إضافة التحقق من صحة للصور غير الموجودة ومثل هذا. قد تختلف الأميال الخاص بك. إلخ.

هل تحتاج حقا إلى البرنامج المساعد؟

هل شيء بسيط مثل العمل أدناه؟

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

طريقة بديلة مع أياكس. أنا لم اختبرها، ولكن googled حول الموضوع. فيما يلي بعض الملاحظات:

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

خادم خادم

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

عرض محتوى الإعلان من respose.writefile () / استجابة. contenttype

http://www.dotnetperls.com/Response-Writefile.

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

أنا أقاسم هنا نسخة جافا سكريبت نقية لتغيير الصورة باستخدام القائمة المنسدلة: -

<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>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top