09-JS 显示选进来的图片

  • input 中使用 onchange 事件，监控是否有图片选进来；

  • img 中使用 id 标签，用于获取时将选中的图片显示到 img 标签中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    
    <script type="text/javascript">
        // 用于图片上传前选中图片文件进来后，可以直接显示该图片
        function show(file) {
            var reader = new FileReader(); // 实例化一个FileReader对象，用于读取文件
            var img = document.getElementById('img'); // 获取要显示图片的标签
            // 读取File对象的数据
            reader.onload = function(evt) {
                img.width = "50";
                img.height = "50";
                img.src = evt.target.result;
            }
            reader.readAsDataURL(file.files[0]);
        }
    </script>
    
</head>
<body>
    <input type="file" onchange="show(this)"/>
    <img id="img" src="">
</body>
</html>

JS鼠标放上去显示oss图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<a href="javascript:void(0)" onMouseOut="hideImg()" onmouseover="showImg()">ASCII码字符（图）</a> 
<div id="asciiImg" style="display:none;height:50px;back-ground:#f00;position:absolute;">
    <img src="https://jy-imgs.oss-cn-beijing.aliyuncs.com/img/image-20200523091606519.png">
</div> 
<div>
测试是否会压低文字
</div>

<script type="text/javascript"> 
  function showImg(){ 
      document.getElementById("asciiImg").style.display='block'; 
  } 
  function hideImg(){ 
      document.getElementById("asciiImg").style.display='none'; 
  } 
</script>
04_网页技术 > 06_JavaScript
#JavaScript
09-JS 显示选进来的图片
https://janycode.github.io/2018/05/23/04_网页技术/06_JavaScript/09-JS 显示选进来的图片/
作者
Jerry(姜源)
发布于
2018年5月23日
许可协议