设置选择图片时在网页内部实时预览
想让file按钮选择完文件后在当前页面显示
1.找到对应的文件夹标签
2.找到对应的图片盒子
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>