說起各大網站的用戶中心功能,其中就少不了用戶頭像上傳這個小小的功能,如果我們依托框架來編寫的的話,相信非常的容易,但如果我們自己來單純的使用JS來實現頭像上傳,并在選擇本地頭像的時候,實現預覽我想也是很容易的。

用html的file標簽就能實現圖片上傳前預覽,原理就是通過file標簽和js的FileReader接口,把選擇的圖片文件調用readAsDataURL方法,把圖片數據轉成base64字符串形式顯示在頁面上。

HTML實現頭像上傳并預覽

国产视频app以下頭像上傳并實時預覽代碼來自網絡,并做了相應的調試,可正常運行。

HTML代碼

<input type="file" name="pclogo" id="xdaTanFileImg" onchange="xmTanUploadImg(this)" accept="image/*">
<img src="默認頭像地址" class="img-circle img-thumbnail img-responsive" id="avarimgs">

JS代碼

<script type="text/javascript">            
if (typeof FileReader == 'undefined') {
    document.getElementById("xmTanDiv").InnerHTML = "<h1>當前瀏覽器不支持FileReader接口</h1>";
   document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled");
        }
//選擇圖片,馬上預覽
 function xmTanUploadImg(obj) {
  var file = obj.files[0];               
  console.log(obj);console.log(file);
  console.log("file.size = " + file.size);
  var reader = new FileReader();
  reader.onloadstart = function (e) {
     console.log("開始讀取....");
  }
    reader.onprogress = function (e) {
         console.log("正在讀取中....");
  }
  reader.onabort = function (e) {
     console.log("中斷讀取....");
  }
  reader.onerror = function (e) {
      console.log("讀取異常....");
  }
  reader.onload = function (e) {
      console.log("成功讀取....");
  var img = document.getElementById("avarimgs");
      img.src = e.target.result;
   //或者 img.src = this.result;  //e.target == this
  }
      reader.readAsDataURL(file)
  }
</script>

国产视频app以上代碼,來自網絡,并且本地測試通過。如果你有更好用的代碼,可以下面留言哦!