javascript实现图片的预览

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

转载最新推荐文章于 2022-08-08 16:12:55 发布 · 169 阅读

0 ·

CC 4.0 BY-SA版权

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

文章标签：

#javascript #ViewUI

本文介绍了一个简单的JavaScript代码片段，该代码允许用户在上传图片时实时预览所选图片。通过监听文件输入元素的变化并更新图像元素的源，可以轻松实现这一功能。

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