欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2020年02月12日 12:04:17   作者:我啊翔1314  
這篇文章主要介紹了JS+HTML實現(xiàn)自定義上傳圖片按鈕并顯示圖片功能的方法,結(jié)合實例形式分析了JavaScript圖片上傳、編碼轉(zhuǎn)換等相關(guān)操作技巧,需要的朋友可以參考下

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

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

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>圖片上傳</title>
</head>
<body>
  <!-- 要將父布局的position設(shè)置為relative,父布局將無法包裹input -->
  <div style="position: relative;">
    <!--設(shè)置input的position為absolute,使其不按文檔流排版,并設(shè)置其包裹整個布局 -->
    <!-- 設(shè)置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):

  1. FileReader將文件轉(zhuǎn)Base64顯示。FileReader能夠異步讀取文件,并將文件轉(zhuǎn)化為可讀取的編碼。我們可以通過input獲取上傳圖片的file實例。我們可以通過FileReader將file實例轉(zhuǎn)化為Base64,然后通過img標簽加載圖片的Base64編碼。
<script type="text/javascript">
  function showImg(input) {
    var file = input.files[0];
    var reader = new FileReader()
    // 圖片讀取成功回調(diào)函數(shù)
    reader.onload = function(e) {
      document.getElementById('upload').src=e.target.result
    }
    reader.readAsDataURL(file)
  }
</script>

  1. 通過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設(shè)置為relative,父布局將無法包裹input -->
  <div style="position: relative;">
    <!--設(shè)置input的position為absolute,使其不按文檔流排版,并設(shè)置其包裹整個布局 -->
    <!-- 設(shè)置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>

最終顯示效果如圖:


多圖上傳

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

相關(guān)文章

最新評論