JS获取input的value值,然后将值放入IMG src中

 我来答
初吻gei叻烟
2017-05-02 · TA获得超过940个赞
知道小有建树答主
回答量:794
采纳率:88%
帮助的人:125万
展开全部

完整的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>
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
帐号已注销
2019-01-06
知道答主
回答量:83
采纳率:16%
帮助的人:7.5万
展开全部
<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>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
街角遇到疯子嫁
2017-03-01 · TA获得超过328个赞
知道答主
回答量:704
采纳率:0%
帮助的人:97.4万
展开全部
1、根据id获取input节点 2、通value获取input值 示例:
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式