<!-- 樣似總結：

用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>

遇見問題，這是你成長的機會，如果你能夠解決，這就是收獲。

作者：明月人倚樓

出處：https://www.cnblogs.com/IwishIcould/

想問問題，打賞了卑微的部落客，求求你備注一下的扣扣或者微信；這樣我好聯系你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注部落客，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，是以如果你心情還比較高興，也是可以掃碼打賞部落客(っ•̀ω•́)っ✎⁾⁾！

支付寶

微信

本文版權歸作者所有，歡迎轉載，未經作者同意須保留此段聲明，在文章頁面明顯位置給出原文連接配接

如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。

預覽本地圖檔原生js

遇見問題，這是你成長的機會，如果你能夠解決，這就是收獲。