javascript实现图片的预览

最新推荐文章于 2022-08-08 16:12:55 发布

CATR2014

最新推荐文章于 2022-08-08 16:12:55 发布

阅读量125

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wtyhome/p/7490553.html

版权

简单javascript代码实现上传图片预览

<body>
    <!-- 设置当有图片准备上传时触发javascript代码-->
     <input type="file" id="file_input" onchange="show_image()" />
     <img src="" alt="" id="show_img" width="100px" height="100px" style="display: none;" />
</body>
<script>
     function show_image() {
        //抓取到上传图片的input标签的信息
         file_input = document.getElementById("file_input");
        //抓取到需要展示预览图的img标签信息
         show_img = document.getElementById("show_img");
        //回去预览图的src属性信息
         show_img.src = window.URL.createObjectURL(file_input.files[0]);
        //改变style属性中block的值
         show_img.style.display = 'block';
     }
</script>

转载于:https://www.cnblogs.com/wtyhome/p/7490553.html