HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
程序员文章站
2023-12-01 12:42:46
这篇文章主要为大家详细介绍了HTML5 Plus的Camera、GalleryIO、Storage和Uploader,实现手机APP拍照或相册选择图片上传功能的相关资料,感兴趣的小伙伴们可以参考一下... 16-07-13...
利用html plus的camera、galleryio、storage和uploader来实现手机app拍照或者从相册选择图片上传。camera模块管理设备的摄像头,可用于拍照、摄像操作,通过plus.camera获取摄像头管理对象。gallery模块管理系统相册,支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。通过plus.gallery获取相册管理对象。io模块管理本地文件系统,用于对文件系统的目录浏览、文件的读取、文件的写入等操作。通过plus.io可获取文件系统管理对象。storage模块管理应用本地数据存储区,用于应用数据的保存和读取。应用本地数据与localstorage、sessionstorage的区别在于数据有效域不同,前者可在应用内跨域操作,数据存储期是持久化的,并且没有容量限制。通过plus.storage可获取应用本地数据管理对象。uploader模块管理网络上传任务,用于从本地上传各种文件到服务器,并支持跨域访问操作。通过plus.uploader可获取上传管理对象。uploader上传使用http的post方式提交数据,数据格式符合multipart/form-data规范,即rfc1867(form-based file upload in html)协议。
xml/html code复制内容到剪贴板
- <!doctype html>
- <html class="feedback">
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
- <meta name="misapplication-tap-highlight" content="no" />
- <meta name="handheldfriendly" content="true" />
- <meta name="mobileoptimized" content="320" />
- <title>html5 plus 拍照或者相册选择图片上传</title>
- <link rel="stylesheet" href="../../css/mui.min.css">
- <link rel="stylesheet" type="text/css" href="../../css/app.css" />
- <link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />
- <link rel="stylesheet" type="text/css" href="../../css/feedback-page.css" />
- <link rel="stylesheet" href="../../css/font-awesome.min.css">
- <script src="../../js/jquery.js"></script>
- <script type="text/javascript" src="../../js/common.js"></script>
- <script type="text/javascript" src="../../js/utitls.js"></script>
- <script type="text/javascript" src="http://api.map.baidu.com/api?ak=59pbaeoro16cih2w4cg81zen&v=2.0"></script>
- <style type="text/css">
- .del {
- position: absolute;
- top:1px;
- right: 1px;
- display: block;
- line-height: 1;
- cursor: pointer;
- color:#fff;
- }
- .del:hover {
- color:#ff3333;
- }
- </style>
- <style>
- .table-view {
- position: relative;
- margin-top: 0;
- margin-bottom: 0;
- padding-left: 0;
- list-style: none;
- background-color: #f5f5f5;
- }
- .table-view-cell {
- position: relative;
- overflow: hidden;
- padding: 0px 15px;
- -webkit-touch-callout: none;
- margin-bottom: 1px;
- }
- .table-view-cell:after {
- position: absolute;
- right: 0;
- bottom: 0;
- left: 0px;
- height: 1px;
- content: '';
- -webkit-transform: scaley(.5);
- transform: scaley(.5);
- background-color: #c8c7cc;
- }
- .table-view-cell>a:not(.btn) {
- position: relative;
- display: block;
- overflow: hidden;
- margin: -0px -15px;
- padding: inherit;
- white-space: nowrap;
- text-overflow: ellipsis;
- color: inherit;
- background-color: #75b9f4;
- height: 40px;
- line-height: 40px;
- }
- .navigate-right:after
- {
- font-family: muiicons;
- font-size: inherit;
- line-height: 1;
- position: absolute;
- top: 50%;
- display: inline-block;
- -webkit-transform: translatey(-50%);
- transform: translatey(-50%);
- text-decoration: none;
- color: #666;
- -webkit-font-smoothing: antialiased;
- }
- .table-view-cell.collapse .collapse-content {
- position: relative;
- display: none;
- overflow: hidden;
- margin: 0px -15px 0px;
- padding: 0px 0px !important;
- -webkit-transition: height .35s ease;
- -o-transition: height .35s ease;
- transition: height .35s ease;
- background-color: transparent;
- }
- .image-item{
- position: relative;
- }
- .image-item .info{
- position: absolute;
- top:0px;
- left:4px;
- color: #ff9900;
- font-size: 12px;
- }
- </style>
- </head>
- <body>
- <header class="bar bar-nav">
- <h1 class="title">拍照或者相册选择图片上传</h1>
- </header>
- <div class="content">
- <div style="margin-top: 10px;"></div>
- <input type="hidden" id="ckjl.id" name="ckjl.id" value="429">
- <div class="collapse-content" >
- <form>
- <label class="row-label"></label>
- <div id='f_ckjlbs' class="row image-list">
- <div class="image-item " id="f_ckjlb" onclick="showactionsheet(this);"></div>
- </div>
- </form>
- </div>
- </div>
- <script src="../../js/mui.min.js"></script>
- <script>
- var procinstid = 0;
- //初始化页面执行操作
- function plusready() {
- //android返回键监听事件
- plus.key.addeventlistener('backbutton',function(){
- myclose();
- },false);
- }
- if (window.plus) {
- plusready();
- } else {
- document.addeventlistener('plusready', plusready, false);
- }
- //加载页面初始化需要加载的图片信息
- //或者相册img_20160704_112620.jpg
- //imgid:图片名称:1467602809090或者img_20160704_112620
- //imgkey:字段例如:f_zddzz
- //id:站点编号id,例如429
- //src:src="file:///storage/emulated/0/android/data/io.dcloud.hbuilder/.hbuilder/apps/hbuilder/doc/upload/f_zddzz-1467602809090.jpg"
- function showimgdetail (imgid,imgkey,id,src) {
- var html = "";
- html +='<div id="img'+imgid+imgkey+'" class="image-item ">';
- html +=' <img id="picbig" data-preview-src="" data-preview-group="1" '+src+'/>';
- html +=' <span class="del" onclick="delimg(\''+imgid+'\',\''+imgkey+'\','+id+');">';
- html +=' <div class="fa fa-times-circle"></div>';
- html +=' </span>';
- html +='</div>';
- $("#"+imgkey+"s").append(html);
- }
- //删除图片
- //imgid:图片名称:img_20160704_112614
- //imgkey:字段,例如f_zddzz
- //id:站点编号id,例如429
- function delimg(imgid,imgkey,id){
- var bts = ["是", "否"];
- plus.nativeui.confirm("是否删除图片?", function(e) {
- var i = e.index;
- if (i == 0) {
- var itemname=id+"img-"+imgkey;//429img-f_zddzz
- var itemvalue=plus.storage.getitem(itemname);
- //{img_20160704_112614,_doc/upload/f_zddzz-img_20160704_112614.jpg,file:///storage/emulated/0/android/data/io.dcloud...../doc/upload/f_zddzz-1467602809090.jpg}
- if(itemvalue!=null){
- var index=itemvalue.indexof(imgid+",");
- if(index==-1){//没有找到
- delimgfromint(imgid,imgkey,id,index);
- }else{
- delimgfromlocal(itemname,itemvalue,imgid,imgkey,index); //修改,加了一个index参数
- }
- }else{
- delimgfromint(imgid,imgkey,id);
- }
- }
- },"查勘", bts);
- /*var isdel = confirm("是否删除图片?");
- if(isdel == false){
- return;
- }*/
- }
- function delimgfromlocal(itemname,itemvalue,imgid,imgkey,index){
- var wa = plus.nativeui.showwaiting();
- var left=itemvalue.substr(0,index-1);
- var right=itemvalue.substring(index,itemvalue.length);
- var end=right.indexof("}");
- rightright=right.substring(end+1,right.length);
- var newitem=left+right;
- plus.storage.setitem(itemname,newitem);
- myalert("删除成功");
- $("#img"+imgid+imgkey).remove();
- wa.close();
- }
- //选取图片的来源,拍照和相册
- function showactionsheet(conf){
- var divid = conf.id;
- var actionbuttons=[{title:"拍照"},{title:"相册选取"}];
- var actionstyle={title:"选择照片",cancel:"取消",buttons:actionbuttons};
- plus.nativeui.actionsheet(actionstyle, function(e){
- if(e.index==1){
- getimage(divid);
- }else if(e.index==2){
- galleryimg(divid);
- }
- } );
- }
- //相册选取图片
- function galleryimg(divid) {
- plus.gallery.pick( function(p){
- //alert(p);//file:///storage/emulated/0/dcim/camera/img_20160704_112620.jpg
- plus.io.resolvelocalfilesystemurl(p, function(entry) {
- //alert(entry.tolocalurl());//file:///storage/emulated/0/dcim/camera/img_20160704_112620.jpg
- //alert(entry.name);//img_20160704_112620.jpg
- compressimage(entry.tolocalurl(),entry.name,divid);
- }, function(e) {
- plus.nativeui.toast("读取拍照文件错误:" + e.message);
- });
- }, function ( e ) {
- }, {
- filename: "_doc/camera/",
- filter:"image"
- } );
- }
- // 拍照
- function getimage(divid) {
- var cmr = plus.camera.getcamera();
- cmr.captureimage(function(p) {
- //alert(p);//_doc/camera/1467602809090.jpg
- plus.io.resolvelocalfilesystemurl(p, function(entry) {
- //alert(entry.tolocalurl());//file:///storage/emulated/0/android/data/io.dcloud...../doc/camera/1467602809090.jpg
- //alert(entry.name);//1467602809090.jpg
- compressimage(entry.tolocalurl(),entry.name,divid);
- }, function(e) {
- plus.nativeui.toast("读取拍照文件错误:" + e.message);
- });
- }, function(e) {
- }, {
- filename: "_doc/camera/",
- index: 1
- });
- }
- //压缩图片
- function compressimage(url,filename,divid){
- var name="_doc/upload/"+divid+"-"+filename;//_doc/upload/f_zddzz-1467602809090.jpg
- plus.zip.compressimage({
- src:url,//src: (string 类型 )压缩转换原始图片的路径
- dst:name,//压缩转换目标图片的路径
- quality:20,//quality: (number 类型 )压缩图片的质量.取值范围为1-100
- overwrite:true//overwrite: (boolean 类型 )覆盖生成新文件
- },
- function(event) {
- //uploadf(event.target,divid);
- var path = name;//压缩转换目标图片的路径
- //event.target获取压缩转换后的图片url路
- //filename图片名称
- saveimage(event.target,divid,filename,path);
- },function(error) {
- plus.nativeui.toast("压缩图片失败,请稍候再试");
- });
- }
- //保存信息到本地
- /**
- *
- * @param {object} url 图片的地址
- * @param {object} divid 字段的名称
- * @param {object} name 图片的名称
- */
- function saveimage(url,divid,name,path){
- //alert(url);//file:///storage/emulated/0/android/data/io.dcloud...../doc/upload/f_zddzz-1467602809090.jpg
- //alert(path);//_doc/upload/f_zddzz-1467602809090.jpg
- var state=0;
- var wt = plus.nativeui.showwaiting();
- // plus.storage.clear();
- namename=name.substring(0,name.indexof("."));//图片名称:1467602809090
- var id = document.getelementbyid("ckjl.id").value;
- var itemname=id+"img-"+divid;//429img-f_zddz
- var itemvalue=plus.storage.getitem(itemname);
- if(itemvalue==null){
- itemvalue="{"+name+","+path+","+url+"}";//{img_20160704_112614,_doc/upload/f_zddzz-img_20160704_112614.jpg,file:///storage/emulated/0/android/data/io.dcloud...../doc/upload/f_zddzz-1467602809090.jpg}
- }else{
- itemvalueitemvalue=itemvalue+"{"+name+","+path+","+url+"}";
- }
- plus.storage.setitem(itemname, itemvalue);
- var src = 'src="'+url+'"';
- //alert("itemvalue="+itemvalue);
- showimgdetail(name,divid,id,src);
- wt.close();
- }
- //上传图片,实例中没有添加上传按钮
- function uploadimge(agree,back) {
- //plus.storage.clear();
- var wa = plus.nativeui.showwaiting();
- var dkeynames=[];
- var id = document.getelementbyid("ckjl.id").value;
- var length=id.tostring().length;
- var ididnmae=id.tostring();
- var numkeys=plus.storage.getlength();
- var task = plus.uploader.createupload(geturl() + 'url', {
- method: "post"
- },
- function(t, status) {
- if (status == 200) {
- console.log("上传成功");
- $.ajax({
- type: "post",
- url: geturl() + 'url',
- data: {
- taskid: taskid,
- voteagree: agree,
- back: back,
- votecontent: $("#assign").val(),
- },
- async: true,
- datatype: "text",
- success: function(data) {
- wa.close();
- golist(data);
- },
- error: function() {
- wa.close();
- myalert("网络错误,提交审批失败,请稍候再试");
- }
- });
- } else {
- wa.close();
- console.log("上传失败");
- }
- }
- );
- task.adddata("id",id);
- for(var i=0; i<imgarray.length;i++){
- var itemkey=id+"img-"+imgarray[i];
- if(plus.storage.getitem(itemkey)!=null){
- var itemvalue=plus.storage.getitem(itemkey).split("{");
- for(var img=1;img<itemvalue.length;img++){
- var imgname=itemvalue[img].substr(0,itemvalue[img].indexof(","));
- var imgurl=itemvalue[img].substring(itemvalue[img].indexof(",")+1,itemvalue[img].lastindexof(","));
- task.addfile(imgurl,{key:imgurl});
- }
- }
- }
- task.start();
- }
- </script>
- </body>
- </html>
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
原文链接: