在使用者註冊賬號或者修改資料的時候會需要使用者在本地選擇一張圖片作為頭像，並同時預覽，

常見的思路有兩種：一是將圖片上傳至伺服器的臨時資料夾中，並返回該圖片的url，然後渲染在html頁面；另一種思路是，直接在本地記憶體中預覽圖片，使用者確認提交後再上傳至伺服器儲存。

這兩種方法各有利弊，方法一很明顯，浪費流量和伺服器資源；方法二則加重了瀏覽器的負擔，並且對瀏覽器的相容性要求更高。

這裡介紹的是直接在本地記憶體中預覽圖片，使用者確認提交後再上傳至伺服器儲存這種方法

body{    font-size: 12px;}.reHead{    margin: 15px 4%; }.headForm{    text-align: center;    padding: 40px 0 70px 0;}#test-image-preview {    position: relative;    display: inline-block;    width: 100px;    height: 100px;    border-radius: 50px;    background: #F5F5F5;    color: #fff;    font-size: 60px;    text-align: center;    line-height: 100px;    background-size: contain;    background-repeat: no-repeat;    background-position: center center;    margin-bottom: 26px;}.fileHead{    position: absolute;    width: 100px;    height: 100px;    right: 0;    top: 0;    opacity: 0;}.content-format {    font-size: 12px;    font-weight: 400;    color: rgba(153, 153, 153, 1);}.headMain{    height: 40px;}.file {    position: relative;    background: #fff;    color: #F39800;    font-weight:800;}.file input {    position: absolute;    font-size: 12px;    right: 0;    top: 0;    opacity: 0;}.fileName {    line-height: 28px;    font-size: 12px;    font-weight: 400;    color: rgba(51, 51, 51, 1);}.but{    text-align: center;}.orangeHead{    width: 40%;    height: 40px;    background: #f60;    border: none;}.orangeHead a{    color: #fff;}

這樣就完成了頭像上傳並且提交的功能了,展示效果如下: