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

想让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>

 

转载于:https://www.cnblogs.com/BR-Tao/p/11158241.html