Html5提交照片 挪动端、PC端通用性编码

日期:2021-02-27 类型:科技新闻 

关键词:微信公众号平台小程序,微信打分小程序,小程序发布,小程序大全,微信小程序编程

空话很少说了,说1下今日给大伙儿共享的是 html5提交照片。大家是在挪动端应用的,可是这个在pc上也通用性适配性我只在谷歌检测过。以前1直用的angular写的《用HTML5的File API做提交照片预览能》。今日革除angular的物品共享1个html5 + js 照片提交实例。那末今日還是依照1定的流程来说吧。

 HTML 第1步建立html,大家在网页页面中置放1个文档挑选的input#upload(PS:偷懒1下,这里就已不次写实例了立即拷贝的大家的网页页面)

CSS Code拷贝內容到剪贴板
  1. <div class="con4">     
  2.  <span class="btn upload">提交<input type="file" class="upload_pic" id="upload" /></span>     
  3. </div>     

CSS注:css 写的一些乱哈,看不懂的能够问我,或立即自身写1下就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插口的访问器将得出1个提醒并禁用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特性来检验文档种类,大家自然只容许挑选图象种类的文档,随后大家new1个FileReader案例,并启用readAsDataURL方式来载入选定的图象文档,最终在onload恶性事件中,获得到取得成功载入的文档內容,并以插进1个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. };     

写到这里大家早已进行了照片提交的作用了,大伙儿有兴趣爱好的自身动手能力尝试1下,不懂的地区或我写错的地区1定要找我哦。 FileReader的方式和恶性事件

上一篇:websocket+sockjs+stompjs详解及案例编码 返回下一篇:没有了