好湿?好紧?好多水好爽自慰,久久久噜久噜久久综合,成人做爰A片免费看黄冈,机机对机机30分钟无遮挡

主頁 > 知識庫 > Html5上傳圖片 移動端、PC端通用代碼

Html5上傳圖片 移動端、PC端通用代碼
熱門標簽：濟南辦理400電話 漳州人工外呼系統排名 跟電銷機器人做同事 中紳電銷智能機器人 鄭州電銷外呼系統違法嗎 農村住宅地圖標注 ai電銷機器人連接網關 鶴壁手機自動外呼系統怎么安裝 威海營銷外呼系統招商

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

 HTML 第一步創建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獲取節點，判斷瀏覽器的兼容性，對于不支持FileReader接口的瀏覽器將給出一個提示并禁用input，否則監聽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事件觸發時，調用函數readFile()。在readFile中，我們首先獲取file對象，然后通過file的type屬性來檢測文件類型，我們當然只允許選擇圖像類型的文件，然后我們new一個FileReader實例，并調用readAsDataURL方法來讀取選中的圖像文件，最后在onload事件中，獲取到成功讀取的文件內容，并以插入一個img節點的方式顯示選中的圖片。

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： 你們可以把你們的靚照偷偷發給我?。?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的方法和事件

標簽：紅河 咸陽 營口 文山 萍鄉 蘇州 惠州 甘南

巨人網絡通訊聲明：本文標題《Html5上傳圖片 移動端、PC端通用代碼》，本文關鍵詞  Html5,上傳,圖片,移動,端,；如發現本文內容存在版權問題，煩請提供相關信息告之我們，我們將及時溝通與處理。本站內容系統采集于網絡，涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《Html5上傳圖片 移動端、PC端通用代碼》相關的同類信息！
  • 本頁收集關于Html5上傳圖片 移動端、PC端通用代碼的相關信息資訊供網民參考！
    • 推薦文章