javascript頭像上傳代碼實(shí)例

更新時間：2019年09月28日 14:06:31 作者：Mr小zhou

這篇文章主要介紹了javascript頭像上傳代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

上傳頭像：

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

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

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

dataTransfer（它可以保存一項(xiàng)或多項(xiàng)數(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">
   <h1>拖動外部圖片或單擊上傳圖片</h1>
   <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) {
  // 實(shí)例化一個圖片對象
  var imgFile = new FileReader();
  // 獲取圖片的路徑
  imgFile.readAsDataURL(img);
  imgFile.onload = function(e) {
   // 將上傳圖標(biāo)設(shè)置為當(dāng)前圖片
   addImg.src = e.target.result;

  }
 }
 /* 1.點(diǎn)擊上傳圖片 */
 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;
 }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后層展開效果的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后層展開效果的方法,可實(shí)現(xiàn)點(diǎn)擊文字緩慢展開層的效果,具有一定參考借鑒價值,需要的朋友可以參考下
2015-05-05
ajax級聯(lián)菜單實(shí)現(xiàn)方法實(shí)例分析
這篇文章主要介紹了ajax級聯(lián)菜單實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了基于ajax與后臺php交互實(shí)現(xiàn)級聯(lián)菜單功能的相關(guān)操作技巧,需要的朋友可以參考下
2016-11-11
文本框中,回車鍵觸發(fā)事件的js代碼[多瀏覽器兼容]
在文本框中輸入完內(nèi)容后,經(jīng)常需要按回車,焦點(diǎn)跳到下個文本框,或者觸發(fā)按鈕事件
2010-06-06
基于js中的存儲鍵值對以及注意事項(xiàng)介紹
下面小編就為大家介紹一下基于js中的存儲鍵值對以及注意事項(xiàng)。希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
JavaScript使用箭頭函數(shù)實(shí)現(xiàn)優(yōu)化代碼
在JavaScript的編程世界里,我們時常被普通函數(shù)的冗長寫法所困擾,每次都需要寫function關(guān)鍵字,有時候還要明確地寫return語句,下面我們就來看看如何利用箭頭函數(shù)優(yōu)化這些繁瑣的代碼吧
2023-11-11
layui的表單驗(yàn)證支持ajax判斷用戶名是否重復(fù)的實(shí)例
今天小編就為大家分享一篇layui的表單驗(yàn)證支持ajax判斷用戶名是否重復(fù)的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
JavaScript實(shí)現(xiàn)獲取網(wǎng)絡(luò)通信進(jìn)度
這篇文章主要為大家詳細(xì)介紹了如何使用Fetch?API和XMLHttpRequest（XHR）來執(zhí)行網(wǎng)絡(luò)請求,并重點(diǎn)說明如何獲取這兩種方法的網(wǎng)絡(luò)請求進(jìn)度,感興趣的可以了解下
2023-12-12
js獲取當(dāng)前路徑的簡單示例代碼
本篇文章主要是對js獲取當(dāng)前路徑的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01
被jQuery折騰得半死，揭秘為何jQuery為何在IE/Firefox下均無法使用
某學(xué)員前日實(shí)施一個Web項(xiàng)目實(shí)施發(fā)生了悲劇,找到我求解決，把我也折騰個半死。
2010-01-01
JavaScript數(shù)組常用的增刪改查與其他屬性詳解
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組常用的增刪改查與其他屬性的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10