HTML5 Plus 拍照或者相册选择图片上传
程序员文章站
2022-11-21 23:06:27
利用html plus的camera、gallery、io、storage和uploader来实现手机app拍照或者从相册选择图片上传。camera模块管理设备的摄像头，可用于拍照...
利用html plus的camera、gallery、io、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）协议。
<!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="https://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>
<p class="content">
<p style="margin-top: 10px;"></p>
<input type="hidden" id="ckjl.id" name="ckjl.id" value="429">
<p class="collapse-content" >
<form>
<label class="row-label"></label>
<p id='f_ckjlbs' class="row image-list">
<p class="image-item " id="f_ckjlb" onclick="showactionsheet(this);"></p>
</p>
</form>
</p>
</p>
<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=/uploadfile/2016/0714/20160714013815250.jpg"
function showimgdetail (imgid,imgkey,id,src) {
var html = "";
html +='<p 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 +=' <p class="fa fa-times-circle"></p>';
html +=' </span>';
html +='</p>';
$("#"+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("}");
right=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 pid = conf.id;
var actionbuttons=[{title:"拍照"},{title:"相册选取"}];
var actionstyle={title:"选择照片",cancel:"取消",buttons:actionbuttons};
plus.nativeui.actionsheet(actionstyle, function(e){
if(e.index==1){
getimage(pid);
}else if(e.index==2){
galleryimg(pid);
}
} );
}
//相册选取图片
function galleryimg(pid) {
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,pid);
}, function(e) {
plus.nativeui.toast("读取拍照文件错误：" + e.message);
});
}, function ( e ) {
}, {
filename: "_doc/camera/",
filter:"image"
} );
}
// 拍照
function getimage(pid) {
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,pid);
}, function(e) {
plus.nativeui.toast("读取拍照文件错误：" + e.message);
});
}, function(e) {
}, {
filename: "_doc/camera/",
index: 1
});
}
//压缩图片
function compressimage(url,filename,pid){
var name="_doc/upload/"+pid+"-"+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,pid);
var path = name;//压缩转换目标图片的路径
//event.target获取压缩转换后的图片url路
//filename图片名称
saveimage(event.target,pid,filename,path);
},function(error) {
plus.nativeui.toast("压缩图片失败，请稍候再试");
});
}
//保存信息到本地
/**
*
* @param {object} url 图片的地址
* @param {object} pid 字段的名称
* @param {object} name 图片的名称
*/
function saveimage(url,pid,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();
name=name.substring(0,name.indexof("."));//图片名称：1467602809090
var id = document.getelementbyid("ckjl.id").value;
var itemname=id+"img-"+pid;//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{
itemvalue=itemvalue+"{"+name+","+path+","+url+"}";
}
plus.storage.setitem(itemname, itemvalue);
var src = 'src="'+url+'"';
//alert("itemvalue="+itemvalue);
showimgdetail(name,pid,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 idnmae=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>
下一篇： 弹性盒模型，flex布局
推荐阅读
-
ios利用 AFN 上传相册或者拍照图片
-
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
-
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
-
HTML5 Plus 拍照或者相册选择图片上传
-
mui拍照、相册选择以及上传图片(前后端代码)
-
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能的实例代码
-
HTML5 Plus 拍照或者相册选择图片上传
-
html5上传图片IOS系统和Android系统下均显示摄像头拍照和图片选择
-
html5上传图片IOS系统和Android系统下均显示摄像头拍照和图片选择
-
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能