JS获取input的value值，然后将值放入IMG src中
4个回答
展开全部
完整的DEMO
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>百度ID:初吻gei叻烟</title>
<script>
function synchronize(){
document.getElementById('i1').src =document.getElementById('i2').value;
document.getElementById('i3').src =document.getElementById('i4').value;
/*以此类推*/
}
setInterval(synchronize,1000);//1000是1秒刷新一次。
</script>
</head>
<body>
<img id = "i1" width="200" height="200">
<br/>
<br/>
<input type="text" id="i2" name="second">
<br>
<br>
<img id = "i3" width="400" height="200">
<br/>
<br/>
<input type="text" id="i4" name="second">
<!--下面注释掉这段是优化过的，因为我知道你后续一定会遇到这些问题-->
<!-- <img id = "i1" width="200" height="200" onerror="this.src='images/null.PNG';"/>
null.PNG是一张1*1像素背景透明的PNG图片。
为什么这样写呢，因为当你在输入input中的图片URL的时候，或许是正在输入，还没输入完整，或许是图片不存在，或许是没加载出来，
这时候，<img>的src是空的， 前端会显示一个未加载的左上角碎裂的小图片，并且还有白框，比较不美观，
想上面那样 给img加一个onerror事件，当img的src不存在的时候，赋予img一个临时现实的图片。这样前台就会比较美观。
当然如果你这个效果是用在修改页面，可以像下面那样写 举例是PHP的
图片预览：<img src="<?=$row['logo']?>" id = "i1" width="150" height="150" onerror="this.src='<?=$row['logo']?>';"/>
<br/>
<br/>
图片URL：<input name="second" type="text" id="i2" value="<?=$row['logo']?>">
像上面那样，你不用担心input与img中有初始的value和src会导致js失效。
-->
</body>
</html>
初始
填入RUL后，无刷新无提交自动显示图片。
我也是在寻找同样问题的时候看到你这个问题，后来我运气比较好，找到了思路，
现在过了这么久也不知道你是否也一样好运气。不过我还是希望你能采纳我的回答。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2017-03-01 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
document.getElementById("ccid").value="这里是你要赋的值";
<tr>
<td>代 码：</td>
<td><input name="ccid" id="ccid" value="" type='text' /><script>document.getElementById("ccid").value="x_x()";</script></td>
</tr>
<tr>
<td>代 码：</td>
<td><input name="ccid" id="ccid" value="" type='text' /><script>document.getElementById("ccid").value="x_x()";</script></td>
</tr>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script type="text/javascript">
function view()
{
document.all.photo.style.visibility='visible'
var img = document.getElementById('myImg');
var fileinput = document.getElementById('uploadfile');
if(fileinput.value!='')
{
img.src=fileinput.value;
}
}
</script>
function view()
{
document.all.photo.style.visibility='visible'
var img = document.getElementById('myImg');
var fileinput = document.getElementById('uploadfile');
if(fileinput.value!='')
{
img.src=fileinput.value;
}
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1、根据id获取input节点 2、通value获取input值 示例：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
