首页 > 代码库 > hybird app项目实例:安卓webview中HTML5拍照图片上传
hybird app项目实例:安卓webview中HTML5拍照图片上传
应用的平台环境:安卓webview;
涉及的技术点:
(1) <input type="file" > :在开发中,安卓webview默认点击无法调用文件选择与相机拍照(其他的设备ios等浏览器没有此问题),需要让安卓开发同学在代码调整即可;
(2) 点击选择图片后如何展示在页面上呢?很多开发人员估计是直接获取 this.value,这是错误的,不可行。有2个API可以现实,new FileReader与window.URL.createObjectURL(最优);
new FileReader的实现如下:
<input type="file" name="" id="j-file"> <img src="" id=‘j-img‘ alt="" width="100%"> <button id=‘j-btn‘>upload</button> <script type="text/javascript"> var o_file = document.getElementById(‘j-file‘), o_btn = document.getElementById(‘j-btn‘), o_img = document.getElementById(‘j-img‘); o_file.addEventListener(‘change‘,function(event){ var file = event.target.files[0];
if(!file) return;
var reader = new FileReader(); if(/image/.test(file.type)){ reader.readAsDataURL(file); //读取 }else{ console.log(‘请选择图片‘); } reader.onload = function(){ o_img.setAttribute(‘src‘,reader.result);// 获取地址 } },false); </script>
在安卓webview实战中,读取与写入速度相当慢,不推荐;
//-----------------------------------------------------------------------------------------
window.URL.createObjectURL实现如下:
<input type="file" name="" id="j-file"> <img src="" id=‘j-img‘ alt="" width="100%"> <button id=‘j-btn‘>upload</button> <script type="text/javascript"> var o_file = document.getElementById(‘j-file‘), o_btn = document.getElementById(‘j-btn‘), o_img = document.getElementById(‘j-img‘); o_file.addEventListener(‘change‘,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(‘src‘,url); }else{ console.log(‘请选择图片‘); } },false); o_btn.onclick = function(){ var data = new FormData(); data.append(‘file_a‘,o_file.files[0]); data.append(‘text‘,‘test‘); console.log(data); } </script>
这技术的好处是可以不必把文件内容读取到javascript中,而是直接使用文件内容,速度很快;
(3)如何讲图片数据通过XHR对象传递给服务端呢?new FormData(),为序列化表单以及创建与表单格式相同的数据(XHR传输)提供了实现,FormData不必明确在xhr对象上设置请求头部(如果是表单里面图片上传,enctype需要设置multipart/form-data),XHR能自动识别,实例方法.append(key,value)自定义数据;
完整的代码例子如下:
<input type="file" name="" id="j-file"> <img src="" id=‘j-img‘ alt="" width="100%"> <button id=‘j-btn‘>upload</button> <script type="text/javascript"> var o_file = document.getElementById(‘j-file‘), o_btn = document.getElementById(‘j-btn‘), o_img = document.getElementById(‘j-img‘), target_file = null; o_file.addEventListener(‘change‘,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(‘src‘,url); }else{ console.log(‘请选择图片‘); } },false); o_btn.onclick = function(){ if(!target_file) return; //数据处理 var data = new FormData(); data.append(‘key‘,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+‘%‘);//进度 }, 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",‘上传地址‘, true); xhr.send(data); } </script>
hybird app项目实例:安卓webview中HTML5拍照图片上传
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。