预览本地图片原生js

<!-- 样似总结：
用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>