js實現圖片上傳預覽功能，使用base64編碼來實現

實現圖片上傳的方法有很多，這里我們介紹比較簡單的一種，使用base64對圖片信息進行編碼，然后直接將圖片的base64信息存到數據庫。

但是對於系統中需要上傳的圖片較多時並不建議采用這種方式，我們一般會選擇存圖片路徑的方式，這樣有助於減小數據庫壓力，base64

編碼后的圖片信息是一個很長的字符串，一般我們使用longText類型來將其存入數據庫。

html代碼如下：

<div class="col-sm-6">
　　<img id="headPortraitImgShow" src="img/defaultHeadPoint.jpg" alt="" width="160px" height="180px" />
　　<input type="file" id="headPortraitUpload" style="margin-top:10px;">
</div>

javaScript代碼如下：

$("#headPortraitUpload").on("change",headPortraitListener);

 /*定義全局變量存貯圖片信息*/
 var base64head="";

/*頭像上傳監聽*/
function headPortraitListener(e) {
    var img = document.getElementById('headPortraitImgShow');
      if(window.FileReader) {
          var file  = e.target.files[0];
          var reader = new FileReader();
          if (file && file.type.match('image.*')) {
              reader.readAsDataURL(file);
          } else {
              img.css('display', 'none');
              img.attr('src', '');
          }
          reader.onloadend = function (e) {
          img.setAttribute('src', reader.result);
          base64head = reader.result;
        }
      }
}

效果預覽：默認圖片-----》效果圖

      

最后，將base64head提交到后台存入數據庫即可，下次從數據庫取出直接將該base64信息放到img標簽的src里面圖片就回顯出來了