佳木斯湛栽影视文化发展公司
主頁 > 知識庫 > Html5上傳圖片 移動端、PC端通用代碼

Html5上傳圖片 移動端、PC端通用代碼
熱門標簽：太平洋壽險電話營銷 國美全國運營中心 科大訊飛語音識別系統(tǒng) 團購網站 企業(yè)做大做強 網站排名優(yōu)化 網站文章發(fā)布 百度競價排名

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

 HTML 第一步創(chuàng)建html，我們在頁面中放置一個文件選擇的input#upload（PS：偷懶一下，這里就不再次寫案例了直接復制的我們的頁面）

CSS Code復制內容到剪貼板
  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復制內容到剪貼板
  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é)點，判斷瀏覽器的兼容性，對于不支持FileReader接口的瀏覽器將給出一個提示并禁用input，否則監(jiān)聽input的change事件。

JavaScript Code復制內容到剪貼板
  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. }  

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

JavaScript Code復制內容到剪貼板
  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.      //當文件讀取成功便可以調取上傳的接口，想傳哪里傳哪里（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.          //需要上傳到服務器的在這里可以進行ajax請求      
  15.          ... ...      
  16.      }      
  17. };     

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

標簽：萍鄉(xiāng) 泰州 延邊 林芝 保定 平涼 赤峰 大同

巨人網絡通訊聲明：本文標題《Html5上傳圖片 移動端、PC端通用代碼》，本文關鍵詞  ；如發(fā)現(xiàn)本文內容存在版權問題，煩請?zhí)峁┫嚓P信息告之我們，我們將及時溝通與處理。本站內容系統(tǒng)采集于網絡，涉及言論、版權與本站無關。
  • 相關文章
  • 收縮
    • 微信客服
    • 微信二維碼

    • 電話咨詢

    • 400-1100-266
    阳西县| 西昌市| 武安市| 遂平县| 德安县| 沭阳县| 潼关县| 灵丘县| 彭泽县| 南通市| 贺州市| 新乡市| 海晏县| 天台县| 永吉县| 璧山县| 神农架林区| 三台县| 荆门市| 张家界市| 越西县| 康乐县| 荣昌县| 西乌珠穆沁旗| 同仁县| 桂平市| 亚东县| 望城县| 门头沟区| 涞源县| 胶南市| 云安县| 樟树市| 汕头市| 河间市| 黑山县| 普兰县| 怀集县| 临武县| 买车| 屏东县|