设置选择图片时在网页内部实时预览

weixin_30348519

于 2019-07-09 16:25:00 发布

阅读量168

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/BR-Tao/p/11158241.html

博客介绍了让file按钮选择完文件后在当前页面显示的方法，包括找到对应文件夹标签和tupian盒子，设置值改变事件，通过file.files[0]获取图片对象，将其转换成临时url修改src值，还给出了代码来源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想让file按钮选择完文件后在当前页面显示

1.找到对应的文件夹标签

2.找到对应的tupian盒子

3.设置值改变事件（onchange）//当选择完文件后会触发值改变事件

4.file.flies【0】可以拿到图片的对象，但要修改的是src的值

5.将图片对象转换成临时的url URL.createObjectURL（this.files【0】）；

具体代码如下：

<script>
        // 找到file元素
        var file = document.getElementById('file');
        // 找到img
        var icon = document.getElementById('icon');

        // 选择完图片后事件的事件，没有
        // 但有个类似的事件，叫值改变事件(change)
        file.onchange = function(){

            // 要想办法拿到图片
            console.log(this.files[0]);
            
            // files[0]是图片对象，但是src要给路径
            // icon.src = this.files[0];

            // 把图片对象转成临时url
            icon.src =  URL.createObjectURL(this.files[0]);
            
        }

    </script>