<!-- 样似总结：
用a标签代替file,做文件上传。 将file进行绝对定位，透明度设置为0；宽度为“上传图片”的宽度，超出部分隐藏。
这样做是为了将file隐藏起来。用a标签代替file
a标签变为块级元素，并且进行相对定位。
通过<input />标签，给它指定type类型为file，可提供文件上传；
accept：可选择上传类型，如：只要传图片，且不限制图片格式，为image/*；
multiple：规定是否可以选择多个文件；
规定只可上传图片，且可以选择多个文件
https://blog.csdn.net/chen357313771/article/details/40583163?utm_source=app
样似参看
<style> .imgview{ width: 150px; height: 150px; border-radius: 50%; border: 1px solid red; } .a{ position: relative; display: block; text-decoration: none; color: aqua; } .fileopen{ position: absolute; left: 0; top: 0; opacity: 0; filter: alpha(opacity=0); width: 64px; overflow: hidden; } </style>
<a href="javascript:void(0);" class="a"><input type="file" class="fileopen">上传图片</a> <img src="" alt="" class="imgview" accept="image/png, image/jpeg, image/gif, image/jpg">
<script> var input = document.querySelector("input"); //当选择完成图片之后调用 input.onchange = function(){ //1. 拿到fileinput里面的文件, 这个file是一个file对象， file对象不能直接展示的 var file =input.files[0]; console.log(file); //2. 读取文件，成功img标签可以直接使用的格式 //FileReader类就是专门用来读文件的 var reader = new FileReader(); //3. 开始读文件 //readAsDataURL: dataurl它的本质就是图片的二进制数据， 进行base64加密后形成的一个字符串， 这个字符串可以直接作用img标签的图片资源使用 reader.readAsDataURL(file); //4. 因为文件读取是一个耗时操作， 所以它在回调函数中，才能够拿到读取的结果 reader.onload = function() { console.log(reader.result); //直接使用读取的结果 document.querySelector("img").src = reader.result; } document.querySelector("img").src = file; } </script>
