預覽本地圖片原生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>