用普通的html的 <input type="file"/> 標籤是不能實現實時預覽功能的，獲取表單的值可以得到圖片所在路徑：C:\fakepath\test.png，如果將它直接賦值給img標籤的href屬性，會報錯：Not allowed to load local resource（不允許載入本地資源）。

功能實現
可以通過file標籤和js的 FileReader 介面來實現此功能：

1. 把選擇的圖片檔案呼叫readAsDataURL方法
2. 把圖片資料轉成base64字串形式顯示在頁面上
3. 給a標籤定義 href屬性 和 download=”檔名.字尾名”，就可以實現點選下載的功能

HTML部分

<input type="file" id="uploadImg" onchange="xmTanUploadImg(this)">
<img src="" alt="" id="selectImg">
<a href="javascript:void()" download="picture.jpg" id="xmTanDownload">點此下載</a>

JS部分

<script>
    function xmTanUploadImg(obj) {
        var file = obj.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {    //成功讀取檔案
            var img = document.getElementById("selectImg");
            img.src = e.target.result;   //或 img.src = this.result / e.target == this

            //實現點選下載圖片功能
            var xmTanDownload =  document.getElementById("xmTanDownload");
            xmTanDownload.setAttribute("href", e.target.result);  //給a標籤設定href
        };
    }
</script>
 

效果圖

--------------------- 
作者：一顆冉冉升起的新星 
來源：CSDN 
原文：https://blog.csdn.net/chenxueshanBlog/article/details/81872383 
版權宣告：本文為博主原創文章，轉載請附上博文連結！