Hộp chọn jQuery onchange/onfocus để hiển thị hình ảnh?

Tôi cần một số giúp đỡ để tìm một plugin jQuery mà sẽ cho phép tôi để hiển thị hình ảnh xem trước từ một danh sách lựa chọn của hình ảnh - onfocus/onchange ..Hộp chọn jQuery onchange/onfocus để hiển thị hình ảnh?

Ví dụ:

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

Có ai đi qua một cái gì đó như điều này? Tôi đã thử tìm kiếm nó không có ích ..

Cảm ơn bạn!

Nguồn

2009-06-12 SoulieBaby

Tôi không chắc chắn bạn cần một plugin để đối phó với điều này:

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

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

Nguồn

2009-06-12 00:37:46

cảm ơn nhiều, chính xác những gì tôi muốn !! :) – SoulieBaby

Cảm ơn nhưng nó cũng giống như tôi đã làm. Một số điều khác ...? –

+1 Thanh lịch và đơn giản. – Rap

Tôi không nghĩ rằng có một plugin cho điều này, nhưng nó là khá tầm thường để làm "bằng tay"

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

Bạn nên thêm xác thực cho hình ảnh không tồn tại và như vậy. Số dặm của bạn có thể thay đổi. v.v.

Nguồn

2009-06-12 00:45:00 codehead

Bạn có thực sự cần plugin không?

Điều gì đó đơn giản như dưới đây có hiệu quả không?

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

Nguồn

2009-06-12 00:46:00 tschaible

Phương pháp thay thế bằng AJAX. Tôi đã không thử nghiệm nó, nhưng googled về chủ đề này. Dưới đây là một số lưu ý:

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

Server-side

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

Nguồn

2011-10-01 11:33:54

Tôi đang chia sẻ ở đây phiên bản javascript thuần túy để thay đổi hình ảnh bằng cách sử dụng menu thả xuống: -

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

Nguồn

2012-11-23 12:39:52

điều này không hoạt động trên IE .. bất kỳ ý tưởng nào? –

Hộp chọn jQuery onchange/onfocus để hiển thị hình ảnh?

Trả lời

Các vấn đề liên quan