91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Html5如何上傳圖片到移動端、PC端

發布時間:2021-07-02 11:19:24 來源:億速云 閱讀:178 作者:小新 欄目:web開發

這篇文章主要為大家展示了“Html5如何上傳圖片到移動端、PC端”,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“Html5如何上傳圖片到移動端、PC端”這篇文章吧。

效果圖

Html5如何上傳圖片到移動端、PC端

 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.      heightauto;      

  4.      overflowhidden;      

  5.      margin: % auto  auto;      

  6.      color#FFFFFF;      

  7. }      

  8. con .btn{      

  9.      width: %;      

  10.      height: px;      

  11.      line-height: px;      

  12.      text-aligncenter;      

  13.      background#dbc;      

  14.      displayblock;      

  15.      font-size: px;      

  16.      border-radius: px;      

  17. }      

  18. upload{      

  19.      floatleft;      

  20.      positionrelative;      

  21. }      

  22. upload_pic{      

  23.      displayblock;      

  24.      width: %;      

  25.      height: px;      

  26.      positionabsolute;      

  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: 你們可以把你們的靚照偷偷發給我!)      

  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如何上傳圖片到移動端、PC端”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

万州区| 湘阴县| 佛冈县| 长宁县| 扎赉特旗| 阜阳市| 古丈县| 塘沽区| 渝中区| 远安县| 明水县| 平舆县| 长白| 闽侯县| 商丘市| 策勒县| 海盐县| 沾益县| 龙里县| 延边| 阜康市| 临海市| 巢湖市| 龙游县| 长宁区| 天气| 四子王旗| 塘沽区| 临洮县| 崇左市| 光山县| 贵溪市| 花莲县| 察隅县| 乐至县| 建宁县| 阿图什市| 江永县| 深水埗区| 浦城县| 永修县|