登录  /  注册
首页 > web前端 > js教程 > 正文

安卓中HTML5图片上传实例详解

零下一度
发布: 2017-06-26 13:31:27
原创
2124人浏览过

应用的平台环境:安卓webview;

涉及的技术点:

(1) :在开发中,安卓webview默认点击无法调用文件选择与相机拍照(其他的设备ios等浏览器没有此问题),需要让安卓开发同学在代码调整即可;

(2) 点击选择图片后如何展示在页面上呢?很多开发人员估计是直接获取 this.value,这是错误的,不可行。有2个API可以现实,new FileReader与window.URL.createObjectURL(最优);

  new FileReader的实现如下:

 
 upload
登录后复制

在安卓webview实战中,读取与写入速度相当慢,不推荐;

 //-----------------------------------------------------------------------------------------

window.URL.createObjectURL实现如下:

<input>
 <img  alt="安卓中HTML5图片上传实例详解" >
 <button>upload</button>
 <script>
  var o_file = document.getElementById(&#39;j-file&#39;),
      o_btn = document.getElementById(&#39;j-btn&#39;),
      o_img = document.getElementById(&#39;j-img&#39;);

  o_file.addEventListener(&#39;change&#39;,function(event){      var file = event.target.files[0];      if(!file) return;      var url = window.URL.createObjectURL(file);      if(/image/.test(file.type)){
          o_img.setAttribute(&#39;src&#39;,url);
      }else{
          console.log(&#39;请选择图片&#39;);
      }
  },false);

  o_btn.onclick = function(){      var data = new FormData();
      data.append(&#39;file_a&#39;,o_file.files[0]);
      data.append(&#39;text&#39;,&#39;test&#39;);
        console.log(data);
  } </script>
登录后复制

这技术的好处是可以不必把文件内容读取到javascript中,而是直接使用文件内容,速度很快;

(3)如何讲图片数据通过XHR对象传递给服务端呢?new FormData(),为序列化表单以及创建与表单格式相同的数据(XHR传输)提供了实现,FormData不必明确在xhr对象上设置请求头部(如果是表单里面图片上传,enctype需要设置multipart/form-data),XHR能自动识别,实例方法.append(key,value)自定义数据;

完整的代码例子如下:

<input>
 <img  alt="安卓中HTML5图片上传实例详解" >
 <button>upload</button>
 <script>
  var o_file = document.getElementById(&#39;j-file&#39;),
      o_btn = document.getElementById(&#39;j-btn&#39;),
      o_img = document.getElementById(&#39;j-img&#39;),
      target_file = null;

  o_file.addEventListener(&#39;change&#39;,function(event){      var file = event.target.files[0];      if(!file) return;
      target_file = file;      var url = window.URL.createObjectURL(target_file);      if(/image/.test(target_file.type)){
          o_img.setAttribute(&#39;src&#39;,url);
      }else{
          console.log(&#39;请选择图片&#39;);
      }
  },false);

  o_btn.onclick = function(){      if(!target_file) return;      //数据处理  var data = new FormData();
      data.append(&#39;key&#39;,target_file);    
      var xhr = new XMLHttpRequest();      if(xhr.upload){
        xhr.upload.addEventListener("progress", function(e){          var loaded = e.loaded;    //已经上传大小情况   var tot = e.total;      //附件总大小   var per = Math.floor(100*loaded/tot);  //已经上传的百分比           console.log(per+&#39;%&#39;);//进度        }, false);
      }
    
      xhr.onreadystatechange = function(e) {          if (xhr.readyState == 4) {if (xhr.status >=200&&xhr.status<300||xhr.status==304) {//上传成功                             }
          }
      }; 
      xhr.onloadend = function(){//无论失败或成功      }
      xhr.onerror = function(){          
          //网络失败      }      // 开始上传      xhr.open("POST",&#39;上传地址&#39;, true); 
      xhr.send(data); 
  } </script>
登录后复制

 

以上就是安卓中HTML5图片上传实例详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号