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

Html5上傳圖片 移動(dòng)端、PC端通用代碼

  發(fā)布時(shí)間：2016-06-08 11:37:26   作者：佚名   我要評(píng)論
這篇文章主要介紹了Html5上傳圖片 移動(dòng)端、PC端通用代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下

廢話不多說了，說一下今天給大家分享的是 html5上傳圖片。我們是在移動(dòng)端使用的，但是這個(gè)在pc上也通用兼容性我只在谷歌測(cè)試過。之前一直用的angular寫的《用HTML5的File API做上傳圖片預(yù)覽能》。今天摒棄angular的東西分享一個(gè)html5 + js 圖片上傳案例。那么今天還是按照一定的步驟來講吧。

 HTML 第一步創(chuàng)建html，我們?cè)陧撁嬷蟹胖靡粋€(gè)文件選擇的input#upload（PS：偷懶一下，這里就不再次寫案例了直接復(fù)制的我們的頁面）

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div class="con4">     
  2.  <span class="btn upload">上傳<input type="file" class="upload_pic" id="upload" /></span>     
  3. </div>     

CSS注：css 寫的有些亂哈，看不懂的可以問我，或者直接自己寫一下就ok。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. con{      
  2.      width: %;      
  3.      height: auto;      
  4.      overflow: hidden;      
  5.      margin: % auto  auto;      
  6.      color: #FFFFFF;      
  7. }      
  8. con .btn{      
  9.      width: %;      
  10.      height: px;      
  11.      line-height: px;      
  12.      text-align: center;      
  13.      background: #dbc;      
  14.      display: block;      
  15.      font-size: px;      
  16.      border-radius: px;      
  17. }      
  18. upload{      
  19.      float: left;      
  20.      position: relative;      
  21. }      
  22. upload_pic{      
  23.      display: block;      
  24.      width: %;      
  25.      height: px;      
  26.      position: absolute;      
  27.      left: ;      
  28.      top: ;      
  29.      opacity: ;      
  30.      border-radius: px;      
  31. }     

Javascript 

通過getElementById獲取節(jié)點(diǎn)，判斷瀏覽器的兼容性，對(duì)于不支持FileReader接口的瀏覽器將給出一個(gè)提示并禁用input，否則監(jiān)聽input的change事件。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. //獲取上傳按鈕      
  2. var input = document.getElementById("upload");       
  3. if(typeof FileReader==='undefined'){       
  4.      //result.innerHTML = "抱歉，你的瀏覽器不支持 FileReader";       
  5.      input.setAttribute('disabled','disabled');       
  6. }else{       
  7.      input.addEventListener('change',readFile,false);       
  8. }  

然后，當(dāng)file_input的change事件觸發(fā)時(shí)，調(diào)用函數(shù)readFile()。在readFile中，我們首先獲取file對(duì)象，然后通過file的type屬性來檢測(cè)文件類型，我們當(dāng)然只允許選擇圖像類型的文件，然后我們new一個(gè)FileReader實(shí)例，并調(diào)用readAsDataURL方法來讀取選中的圖像文件，最后在onload事件中，獲取到成功讀取的文件內(nèi)容，并以插入一個(gè)img節(jié)點(diǎn)的方式顯示選中的圖片。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. function readFile(){       
  2.      var file = this.files[];       
  3.      if(!/image\/\w+/.test(file.type)){       
  4.          alert("文件必須為圖片！");       
  5.          return false;       
  6.      }       
  7.      var reader = new FileReader();       
  8.      reader.readAsDataURL(file);       
  9.      //當(dāng)文件讀取成功便可以調(diào)取上傳的接口，想傳哪里傳哪里（PS： 你們可以把你們的靚照偷偷發(fā)給我?。?nbsp;     
  10.      reader.onload = function(e){       
  11.          var data = this.result.split(',');      
  12.          var tp = (file.type == 'image/png')? 'png': 'jpg';      
  13.          var a = data[];      
  14.          //需要上傳到服務(wù)器的在這里可以進(jìn)行ajax請(qǐng)求      
  15.          ... ...      
  16.      }      
  17. };     

寫到這里我們已經(jīng)完成了圖片上傳的功能了，大家有興趣的自己動(dòng)手嘗試一下，不懂的地方或者我寫錯(cuò)的地方一定要找我哦。 FileReader的方法和事件

相關(guān)文章

最新評(píng)論