开发制作APP怎样解决HTML5调用手机相册？_博纳网络深圳网站建设公司

当前位置：

发布时间：2019-08-01

文章编辑：网站建设文章来源：APP开发浏览量：次

开发制作APP怎样解决HTML5调用手机相册？深圳APP开发制作公司本文将结合我们多年APP开发实战经验将使用HTML5Plus技术实现调用手机相册的应用进行分享。由于不同品牌的手机系统不一样，即便同是Android系统的手机，定制的版本也略有不同，因此实现的效果图可能不尽相同。但这点影响不大，读者只需要掌握使用HTML5Plus技术的方法即可。利用编辑器打开源代码“8-2.HTML5调用手机相册”目录下的“index.html”文件，页面代码如下：
【代码8-2】

01 < body onselectstart=" return false;"> 02 < header id=" header"> 03 < div id=" back" style=" visibility: hidden" class=" nvbt iback" onclick=" plus. runtime. quit()"></ div> 04 < div class=" nvtt"> HTML 5+ 手机相册</ div>

05 < div class=" nvbt iabout" onclick=" clicked(' about. html',' zoom- fade- out', true)"></ div> 06 </ header> 07 < div id=" content" class=" content"> 08 < ul id=" plist" style=" list- style: none; margin: 0; padding: 0; text- align: left;"> 09 < li id=" plus/ gallery. html" onclick=" clicked( this. id);"> 10 < span class=" item"> Gallery 11 < div class=" chs"> 手机相册</ div> 12 </ span> 13 </ li> 14 </ ul> 15 </ div> 16 </ body>

代码第09～13行定义了打开手机相册的列表，其中第09行代码<li>标签内定义了一个JS脚本方法clicked(this.id)，用于打开手机相册页面，而“this.id”定义的页面地址就是“plus/gallery.html”。找到“plus”目录下的“gallery.html”页面，具体代码如下：【代码8-3】

01 <! DOCTYPE HTML> 02 < html> 03 < head> 04 < meta charset=" utf- 8"/> 05 < meta name=" viewport" content=" initial- scale= 1. 0, maximum- scale= 1. 0, user- scalable= no"/> 06 < meta name=" HandheldFriendly" content=" true"/> 07 < meta name=" MobileOptimized" content=" 320"/> 08 < title> Hello H5+</ title> 09 < script type=" text/ javascript" src="../ js/ common. js"></ script> 10 < script type=" text/ javascript"> 11 function plusReady(){ 12 // 用户侧滑返回时关闭显示的图片 13 plus. webview. currentWebview(). addEventListener( "popGesture", function( e){ 14 if( e. type==" start"){ 15 closeImg(); 16 } 17 }, false ); 18 }

19 document. addEventListener(' plusready', plusReady, false); 20 function getImage(){ 21 var cmr = plus. camera. getCamera(); 22 cmr. captureImage( function ( path ) { 23 plus. gallery. save( path ); 24 outSet( "照片已成功保存到系统相册" ); 25 }, function ( e ) { 26 outSet( "取消拍照" ); 27 }, {filename:"_ doc/ gallery/", index: 1} ); 28 } 29 function galleryImg() { 30 // 从相册中选择图片 31 outSet(" 从相册中选择图片:"); 32 plus. gallery. pick( function( path){ 33 outLine( path); 34 //showImg( path ); 35 //createItem( path); 36 }, function ( e ) { 37 outSet( "取消选择图片" ); 38 }, {filter:" image"} ); 39 } 40 function galleryImgs(){ 41 // 从相册中选择图片 42 outSet(" 从相册中选择多张图片:");

43 plus. gallery. pick( function( e){ 44 for( var i in e. files){ 45 outLine( e. files[ i]); 46 } 47 }, function ( e ) { 48 outSet( "取消选择图片" ); 49 },{filter:" image", multiple: true, system: false}); 50 } 51 function galleryImgsMaximum(){ 52 // 从相册中选择图片 53 outSet(" 从相册中选择多张图片( 限定最多选择 3 张):"); 54 plus. gallery. pick( function( e){ 55 for( var i in e. files){ 56 outLine( e. files[ i]); 57 } 58 }, function ( e ) { 59 outSet( "取消选择图片" ); 60 },{filter:" image", multiple: true, maximum: 3, system: false, onmaxed: function (){ 61 plus. nativeUI. alert(' 最多只能选择 3 张图片'); 62 }});// 最多选择 3 张图片 63 } 64 var lfs= null;// 保留上次选择图片列表 65 function galleryImgsSelected(){

66 // 从相册中选择图片 67 outSet(" 从相册中选择多张图片( 限定最多选择 3 张):"); 68 plus. gallery. pick( function( e){ 69 lfs= e. files; 70 for( var i in e. files){ 71 outLine( e. files[ i]); 72 } 73 }, function ( e ) { 74 outSet( "取消选择图片" ); 75 },{filter:" image", multiple: true, maximum: 3, selected: lfs, system: false, onm axed: function(){ 76 plus. nativeUI. alert(' 最多只能选择 3 张图片'); 77 }});// 最多选择 3 张图片 78 } 79 function showImg( url ){ 80 // 兼容以“ file:” 开头的情况 81 if( 0!= url. indexOf(" file://")){ 82 url=" file://"+ url; 83 } 84 var _body_ = document. body; 85 var _div_ = document. createElement(" div"); 86 _div_. style. top=" 0px"; 87 _div_. style. left=" 0px"; 88 _div_. style. height=" 100%";

89 _div_. style. width=" 100%"; 90 _div_. style. zIndex=" 99999"; 91 _div_. style. position=" fixed"; 92 _div_. style. background="# ffffff"; 93 _div_. id=" imgShow"; 94 _div_. onclick= closeImg; 95 var _img_= document. createElement(" img"); 96 _img_. src= url; 97 _img_. style. width=" 100%"; 98 _body_. appendChild(_ div_); 99 _div_. appendChild(_ img_); 100 } 101 function closeImg(){ 102 var trnode= document. getElementById(" imgShow"); 103 trnode&& trnode. parentNode. removeChild( trnode); 104 } 105 var list= null, first= null; 106 document. addEventListener(" DOMContentLoaded", function(){ 107 list= document. getElementById(" list"); 108 first= document. getElementById(" empty"); 109 },false); 110 // 添加列表项 111 function createItem( path) { 112 var li = document. createElement(" li");

113 li. className = "ditem"; 114 li. innerHTML = '<span class=" iplay">< font class=" aname"></ font>< br/>< font class=" ainf"></ font></ span>'; 115 li. setAttribute( "onclick", "displayMedia( this);" ); 116 list. insertBefore( li, first. nextSibling ); 117 var i = path. lastIndexOf("/"); 118 if( i< 0){ 119 i = path. lastIndexOf("\\"); 120 } 121 li. querySelector(". aname"). innerText = path. substr( i+ 1); 122 li. querySelector(". ainf"). innerText = path; 123 li. path = path; 124 // 设置空项不可见 125 first. style. display = "none"; 126 } 127 // 清除列表记录 128 function cleanList() { 129 list. innerHTML = '<li id=" empty" class=" ditem- empty"> 无记录</ li>'; 130 empty = document. getElementById( "empty" ); 131 // 删除音频文件 132 outSet( "清空选择照片记录：" ); 133 } 134 // 返回后关闭图片显示

135 var _back= window. back; 136 window. back= function(){ 137 closeImg(); 138 _back(); 139 }; 140 </ script> 141 < link rel=" stylesheet" href="../ css/ common. css" type=" text/ css" charset= "utf- 8"/> 142 </ head> 143 < body> 144 < header id=" header"> 145 < div class=" nvbt iback" onclick=" back( true);"></ div> 146 < div class=" nvtt"> Gallery</ div> 147 < div class=" nvbt idoc" onclick=" openDoc(' Gallery Document',' /doc/ gallery. html')"></ div> 148 </ header> 149 < div id=" dcontent" class=" dcontent">< br/> 150 < div class=" button" onclick=" getImage()"> 拍照并保存到相册</ div> 151 < div class=" button" onclick=" galleryImg()"> 从相册中单选图片</ div> 152 < div class=" button" onclick=" galleryImgs()"> 从相册中多选图片</ div> 153 < div class=" button" onclick=" galleryImgsMaximum()"> 从相册中多选图片 (最多 3 张)</ div> 154 < div class=" button" onclick=" galleryImgsSelected()"> 从相册中多选图片 (保存勾选记录)</ div>< br/> 155 </ div> 156 < div id=" output"> 157 Gallery 模块管理系统相册，如从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。 158 </ div> 159 </ body> 160 < script type=" text/ javascript" src="../ js/ immersed. js" ></ script> 161 </ html>

代码第149～155行定义了打开手机相册的功能按钮菜单，包括单选图片和多选图片多种选择功能，每一个“onclick”点击事件均定义了JS函数方法；代码第10～140行实现了以上各个功能的JS函数方法。下面我们测试运行一下“HTML5调用手机相册”项目，在手机端打开应用后界面效果如图8.4所示