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

日期：2021-01-20 类型：科技新闻 

关键词：制作小程序，小程序商城，扫码点餐小程序，微信小程序开店的步骤，牛刀小程序

空话很少说了，说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.      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插口的访问器将得出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的方式和恶性事件

上一篇：怎样做出有使用价值的群众号带动微营销推广 返回下一篇：没有了