JS+HTML實現(xiàn)自定義上傳圖片按鈕并顯示圖片功能的方法分析

更新時間：2020年02月12日 12:04:17 作者：我啊翔1314

這篇文章主要介紹了JS+HTML實現(xiàn)自定義上傳圖片按鈕并顯示圖片功能的方法,結合實例形式分析了JavaScript圖片上傳、編碼轉換等相關操作技巧,需要的朋友可以參考下

本文實例講述了JS+HTML實現(xiàn)自定義上傳圖片按鈕并顯示圖片功能的方法。分享給大家供大家參考，具體如下：

在web開發(fā)中，上傳文件功能通過type為file的input標簽即可實現(xiàn)。但input的顯示效果僅為一個按鈕，且不能修改UI。如果要實現(xiàn)自定義上傳按鈕，一般需要設置input為不可見，然后將input與自定義界面放在同一個div中，并將input鋪在界面上方:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>圖片上傳</title>
</head>
<body>
  <!-- 要將父布局的position設置為relative，父布局將無法包裹input -->
  <div style="position: relative;">
    <!--設置input的position為absolute，使其不按文檔流排版，并設置其包裹整個布局 -->
    <!-- 設置opactity為0，使input變透明 -->
    <!-- 只接受jpg，gif和png格式 -->
    <input id="upload-input" style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;" type="file" accept="image/gif, image/jpg, image/png" />
    <!-- 自定義按鈕效果 -->
    <div style="text-align: top">
      <span style="font-size: 12px;">上傳文件：</span>
      <img id="upload" src="./upload.png" style="width: 40px; height: 40px; vertical-align: middle;" />
    </div>
  </div>
</body>
</html>

效果如下：

圖片上傳

這樣，自定義按鈕效果就完成了。但是，這樣還不能把圖片顯示出來。要實現(xiàn)顯示上傳圖片功能，可以通過以下方法實現(xiàn):

FileReader將文件轉Base64顯示。FileReader能夠異步讀取文件，并將文件轉化為可讀取的編碼。我們可以通過input獲取上傳圖片的file實例。我們可以通過FileReader將file實例轉化為Base64，然后通過img標簽加載圖片的Base64編碼。

<script type="text/javascript">
  function showImg(input) {
    var file = input.files[0];
    var reader = new FileReader()
    // 圖片讀取成功回調函數(shù)
    reader.onload = function(e) {
      document.getElementById('upload').src=e.target.result
    }
    reader.readAsDataURL(file)
  }
</script>

通過window.URL.createObjectURL創(chuàng)建url。通過該方法可以為file實例創(chuàng)建一個臨時的url，img可以通過該url將圖片加載出來。由于是臨時的url，因此同一個file實例，每次創(chuàng)建的url都會不一樣:

  function showImg(input) {
    var file = input.files[0];
    var url = window.URL.createObjectURL(file)
    document.getElemtById('upload').src=url
  }

使用上述方法中的其中一種，并將showImg方法掛在input的onchange屬性上，就能夠顯示圖片了:

<input id="upload-input" style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;" 
type="file" accept="image/gif, image/jpg, image/png" 
onchange="showImg(this)"/>

顯示效果如下:

顯示上傳的圖片

上述代碼中，點擊input標簽時，一次性只能選擇一張圖片，如果要選擇多張圖片，則要給input添加multiple屬性：

<input id="upload-input" 
style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;" type="file" 
accept="image/gif, image/jpg, image/png" multiple onchange="showImg(this)"/>

然后通過多個img顯示files里面的圖片即可，代碼如下:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>圖片上傳</title>
</head>
<body>
  <!-- 要將父布局的position設置為relative，父布局將無法包裹input -->
  <div style="position: relative;">
    <!--設置input的position為absolute，使其不按文檔流排版，并設置其包裹整個布局 -->
    <!-- 設置opactity為0，使input變透明 -->
    <!-- 只接受jpg，gif和png格式 -->
    <input id="upload-input" style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;" type="file" accept="image/gif, image/jpg, image/png" onchange="showImg(this)" multiple />
    <!-- 自定義按鈕效果 -->
    <div style="text-align: top">
      <span style="font-size: 12px;">上傳文件：</span>
      <img id="upload" src="./upload.png" style="width: 40px; height: 40px; vertical-align: middle;" />
    </div>
  </div>
  <div id="imgContainer" style="margin-top: 10px;"></div>
</body>
<script type="text/javascript">
  function showImg(obj) {
    var files = obj.files
    // document.getElementById("imgContainer").innerHTML = getImgsByUrl(files)
    getImgsByFileReader(document.getElementById("imgContainer"), files)
  }
  // 使用window.URL.createObjectURL(file)讀取file實例并顯示圖片
  function getImgsByUrl(files) {
    var elements = ''
    for (var i = 0; i < files.length; i++) {
      var url = window.URL.createObjectURL(files[i])
      elements += "<img src='"+ url + "' style='width: 40px; height: 40px; vertical-align: middle; margin-right: 5px;' />"
    }
    return elements
  }
  // 使用FileReader讀取file實例并顯示圖片
  function getImgsByFileReader(el, files) {
    for (var i = 0; i < files.length; i++) {
      let img = document.createElement('img')
      img.setAttribute('style', 'width: 40px; height: 40px; vertical-align: middle; margin-right: 5px;')
      el.appendChild(img)
      var reader = new FileReader()
      reader.onload = function(e) {
        img.src = e.target.result
      }
      reader.readAsDataURL(files[i])
    }
  }
</script>
</html>

最終顯示效果如圖:

多圖上傳