javascript頭像上傳的示例分析

發(fā)布時間：2021-07-24 11:57:15 來源：億速云閱讀：139 作者：小新欄目：web開發(fā)

這篇文章主要為大家展示了“javascript頭像上傳的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“javascript頭像上傳的示例分析”這篇文章吧。

上傳頭像：

相關(guān)關(guān)鍵詞：

ondragover（拖動元素在投放區(qū)內(nèi)移動）

ondrop （元素放在投放區(qū)觸發(fā)但是要去處理瀏覽器默認(rèn)事件的影響：ondragenter、ondragover）

dataTransfer（它可以保存一項或多項數(shù)據(jù)、一種或多數(shù)數(shù)據(jù)類型，通過它來傳輸被拖動的數(shù)據(jù)，以便在拖拽結(jié)束的時候，對數(shù)據(jù)進(jìn)行其他的操作）

<!-- html: -->
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>上傳頭像圖片</title>
  <link rel="stylesheet" type="text/css" href="css/index01.css" rel="external nofollow" />
 </head>
 <body>
  <div class="container">
   <h2>拖動外部圖片或單擊上傳圖片</h2>
   <div class="main">
    <input type="file" name="file" id="file"/>
    <img src="img/十字架.png" class="btn">
   </div>
  </div>
 </body>
 <script src="js/index01.js"></script>
</html>

/* css樣式： */
*{
 margin: 0;
 padding: 0;
}
.container{
 width: 50%;
 margin: 0 auto;
 height: 400px;
 padding: 20px;
 text-align: center;
}
.main{
 width: 200px;
 height: 200px;
 border: 2px dashed #666;
 margin: 20px auto;
 position: relative;
}
.main input{
 width: 100%;
 height: 100%;
 opacity: 0;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 z-index: 11;
}
.main .btn{
 width: 150px;
 height: 150px;
 cursor: pointer;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}

/* js */
window.onload = function() {
 // 獲取元素
 var file = document.querySelector("#file");
 var addImg = document.querySelector(".btn");
 var main = document.querySelector(".main");
 // 封裝上傳圖片操作
 function upload(img) {
  // 實例化一個圖片對象
  var imgFile = new FileReader();
  // 獲取圖片的路徑
  imgFile.readAsDataURL(img);
  imgFile.onload = function(e) {
   // 將上傳圖標(biāo)設(shè)置為當(dāng)前圖片
   addImg.src = e.target.result;

  }
 }
 /* 1.點擊上傳圖片 */
 file.onchange = function(e) {
  // 獲取上傳圖片里面的信息
  var img = e.target.files[0];
  upload(img);
 }
 /* 2、拖拽上傳 */
 main.ondragover = function() {
  return false;
 }
 main.ondrop = function(e) {
  upload(e.dataTransfer.files[0]);
  return false;
 }
}

以上是“javascript頭像上傳的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

javascript頭像上傳的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽