预览本地图片原生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>

预览本地图片原生js

猜你喜欢