jQuery onchange/onfocus 이미지를 표시 할 상자를 선택 하시겠습니까?

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

문제

선택한 이미지 목록에서 이미지 미리보기를 표시 할 수있는 jQuery 플러그인을 찾는 데 도움이 필요합니다 -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>

Ajax를 사용한 대체 방법. 나는 그것을 테스트하지 않았지만 주제에 대해 인터넷 검색을했습니다. 다음은 몇 가지 메모입니다.

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

서버 측

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

respose.writefile ()/ response.contentType에서 광고 컨텐츠 표시

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

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

드롭 다운을 사용하여 이미지를 변경하기 위해 Pure JavaScript 버전을 공유하고 있습니다.

<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