文鏈接：https://blog.csdn.net/weixin_42971933/article/details/85995869

作者：呂小胖紙

普通的文件上傳只能看到它的文件名，而如果要實現選擇某一張圖片則可以利用html5的FileReader完成

下面是實現步驟：
html:

這里是上傳圖片的內容，οnchange="getFile()"為選擇文件后的轉換函數，后面會提及
上傳圖片的按鈕我這里是自定義的，做法在另一篇博客里

css:

預覽框我暫定為100x100的正方形框，出來后圖片可能會有變形之類的，可以自定義

接下來是主要的JS部分
JS：

1. 首先，定義一個變量showFile保存實際要顯示的圖片的整個文件
   
2. 獲取預覽框，方便之后的顯示：
   準備工作做完了，現在開始轉碼
3. 編寫一個函數，將圖片路徑轉碼
   這樣就獲取到了轉碼后的圖片文件的src
   （注意：FileReader在IE里是不兼容的，IE 6-9完全不兼容，IE 10-11需要寫兼容）
4. 接下來就是轉換啦
   這里將選擇的文件獲取到之后，再賦給全局文件（如果點開了選擇框但是沒有選擇文件即為之前的文件本身），再回調函數里將src賦給預覽框
   這一步的完成時間是在file框的onchange中完成的
5. 然后效果就完成啦，看看成果吧
   選擇之前：
   因為我沒有給img賦src,所以為空白
   選擇之后：
   選擇圖片就可以預覽啦，再選擇圖片一樣可以預覽

樣式簡潔，可以自己定義，比如寫個+什么的
像這種：

樣式就自己定義好了。

對了，在這里說一下，我目前是在職web前端開發，如果你現在正在學習前端，了解前端，渴望成為一名合格的web前端開發工程師，在入門學習前端的過程當中有遇見任何關于學習方法，學習路線，學習效率等方面的問題，都可以隨時關注并私信我：前端，我都會根據大家的問題給出針對性的建議，缺乏基礎入門的視頻教程也可以直接來找我，我這邊有最新的web前端基礎精講視頻教程， 還有我做web前端技術這段時間整理的一些學習手冊，面試題，開發工具，PDF文檔書籍教程，都可以直接分享給大家。

現功能介紹：在使用form表單上傳圖片時，將上傳圖片縮略圖顯示在上傳圖片控件內的方法

HTML區：

<div class="form-group">
      <label for="avatar">頭像<img class="avatar" width="80px" height="80px"
       src="{% static 'image/head/default.png' %}"
                 alt="圖片未加載出"></label>
       <input type="file" id="avatar" style="display: none">
</div>


JS代碼區

<script>
    {#替換頭像位置圖片方法#}
    $('#avatar').change(function () {
            {#jquery對象轉換為DOM對象#}
            var choose_file = $(this)[0].files[0];
            {#創建一個閱讀器對象#}
            var reader = new FileReader();
            {#讀取choose_file的文件對象#}
            reader.readAsDataURL(choose_file);
            {#上面代碼加載完再運行函數內代碼（原因：圖片未加載完下面的代碼就有可能執行完了）#}
            reader.onload = function () {
                {# 路徑的值在reader.result中#}
                $('.avatar').attr("src", reader.result)
            }
        }
    )
</script>

PS:注意務必要引入jQuery樣式

最終結果顯示

#python##Python入門推薦#