jQuery onchange/onfocus Выберите поле для отображения изображения?

мне нужна помощь в поиске плагин JQuery, который позволит мне для отображения предварительного просмотра изображения из списка выбора изображений - OnFocus/OnChange ..jQuery onchange/onfocus Выберите поле для отображения изображения?

Пример:

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

Кто-нибудь на что-то вроде это? Я пробовал искать его безрезультатно ..

Спасибо!

источник

2009-06-12 SoulieBaby

Я не уверен, что вам нужен плагин, чтобы иметь дело с этим:

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

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

источник

2009-06-12 00:37:46

спасибо вам большое, именно то, что я хотел! :) – SoulieBaby

Спасибо, но он также делает то же, что я уже сделал. Что-то еще ...? –

+1 Элегантный и простой. – Rap

Я не думаю, что есть плагин для этого, но это довольно тривиально сделать «вручную»

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

Необходимо добавить оценку не существующих изображений и т. Д. Ваш пробег может отличаться. и т.д.

источник

2009-06-12 00:45:00 codehead

Вам действительно нужен плагин?

Может быть, что-то простое, как показано ниже?

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

источник

2009-06-12 00:46:00 tschaible

Альтернативный метод с AJAX. Я не тестировал его, но искал тему. Вот некоторые примечания:

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

Серверный

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

источник

2011-10-01 11:33:54

Я использую чистую версию 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>

источник

2012-11-23 12:39:52

это не работает над IE .. любая идея? –

jQuery onchange/onfocus Выберите поле для отображения изображения?

ответ

Смежные вопросы