用mui 调用手机拍照和图库上传照片
用mui 调用手机拍照和图库上传照片，可对图片进行删除、查看、注意此功能必要在真机的运行环境下才可以调用手机摄像头和图库照片。
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="css/app.css"/>
<title> </title>
</head>
<style>
html,
body {
overflow:hidden;
margin:0px;
width:100%;
height:100%;
/*background-color: #efeff4;*/
/* background:url(../img/123.png) repeat;
background-size:cover; */
}
div.titles{
margin:30px 10px 20px 10px;
text-align: center;
}
h3{
line-height:1.5;
}
h5,p.leirong{
color: #666;
font-size: 17px;
}
.title {
padding: 20px 15px 10px;
color: #6d6d72;
font-size: 15px;
background-color: #fff;
}
.mui-content > .mui-table-view:first-child {
margin-top: 0px;
}
.mui-table-view:before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 0px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.mui-table-view:after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 0px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.mui-table-view-cell:after {
position: absolute;
right: 0;
bottom: 0;
left: 15px;
height: 0px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.mui-table-views {
position: relative;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
list-style: none;
}
.mui-contents {
background-color: #FFFFFF;
opacity:0.8;
float:inherit;
margin: 45px auto 45px auto;
border: 1px solid #FFFFFF ;
width: 90%;
}
/* .beijingtu{
width: 100%;
height: 100%;
padding-top: 20px;
padding-bottom: 100px;
} */
textarea{
padding: 10px 15px;
}
.mui-input-row label {
font-family: 'Helvetica Neue', Helvetica, sans-serif;
line-height: 1.1;
float: left;
width: 40%;
padding: 11px 15px;
}
.mui-input-row label ~ input{
float: right;
width: 60%;
margin-bottom: 0;
padding-left: 0;
border: 0;
}
.mui-table-view-cell {
position: relative;
overflow: hidden;
padding: 7px 10px;
-webkit-touch-callout: none;
}
.mui-table-view-cell.mui-radio.mui-left {
padding-left: 5px;
}
/* 设置按钮在页面的某个位置而不随着滚动条随意滚动 */
.virtual_body {
width:100%;
height:100%;
overflow-y:auto;
overflow-x:auto;
/* margin-bottom: 40px; */
}
#fixed_div {
position:absolute;
z-index:2008;
bottom:10px;
right:40px;
height:40px;
/* border:1px solid red;
background:#e5e5e5; */
}
/* 图片的样式 */
.head {
height: 40px;
}
#head {
line-height: 40px;
}
.head-img {
width: 40px;
height: 40px;
}
#head-img1 {
position: absolute;
bottom: 10px;
right: 40px;
width: 40px;
height: 40px;
}
.feedback .image-list {
width: 100%;
height:auto;
background-size: cover;
padding: 10px 10px;
overflow: hidden;
}
.feedback .image-item {
width: 65px;
height: 65px;
/*background-image: url(../images/iconfont-tianjia.png);*/
background-size: 100% 100%;
display: inline-block;
position: relative;
border-radius: 5px;
margin-right: 10px;
margin-bottom: 10px;
border: solid 1px #e8e8e8;
vertical-align: top;
}
.feedback .image-item .file {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 0;
}
.feedback .image-item.space {
border: none;
}
.feedback .image-item .image-close {
position: absolute;
display: inline-block;
right: -6px;
top: -6px;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 12px;
background-color: #FF5053;
color: #f3f3f3;
border: solid 1px #FF5053;
font-size: 9px;
font-weight: 200;
z-index: 1;
}
.feedback .image-item .image-up{
height: 65px;
width: 65px;
border-radius: 10px;
line-height: 65px;
border: 1px solid #ccc;
color: #ccc;
display: inline-block;
text-align: center;
}
.feedback .image-item .image-up:after{
font-family: "微软雅黑";
content: '+';
font-size: 60px;
}
.feedback .image-item.space .image-close {
display: none;
}
.feedback .row {
width: 100%;
background-color: #fff;
}
</style>
<body>
<div class="virtual_body">
<div style="height:888px;">
<!-- 标题 -->
<!-- <header id="headerid" class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">考察</h1>
</header> -->
<div class="beijingtu">
<div class="mui-contents feedback">
<ul class="mui-table-views">
<li class="mui-table-view-cell mui-radio mui-left" >
<p>图片</p>
<div id="image-list0" class="row image-list"></div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
<script src="js/mui.js"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script>
mui.init();
(function() {
var index = 1;
var count = 1;//每行文件个数
var size = null;
var imageIndexIdNum = 0;
var feedback = {};
feedback.files = [];
mui.plusReady(function() {
//设备信息，无需修改
feedback.deviceInfo = {
appid: plus.runtime.appid,
imei: plus.device.imei, //设备标识
images: feedback.files, //图片文件
p: mui.os.android ? 'a' : 'i', //平台类型，i表示iOS平台，a表示Android平台。
md: plus.device.model, //设备型号
app_version: plus.runtime.version,
plus_version: plus.runtime.innerVersion, //基座版本号
os: mui.os.version,
net: ''+plus.networkinfo.getCurrentType()
}
});
feedback.getFileInputArray = function(idx) {
return [].slice.call(document.getElementById('image-list'+idx).querySelectorAll('.file'));
};
/* 拍照添加一张图片 */
feedback.addFile = function(idx,path) {
var parentObj = {id:"imagesList"+idx};
var childObj = {name:"images"+count,path:path,id:"img-"+count};
parentObj.childs = childObj;
feedback.files.push(parentObj);
count++;
};
/**
* 相册多选
*/
feedback.addMoreFile = function(count, j, path) {
var parentObj = {id:"imagesList"+count};
var childObj = {name:"images"+count,path:path,id:"img-"+count};
parentObj.childs = childObj;
feedback.files.push(parentObj);
count = count + j;
};
/**
* 初始化图片域占位
*/
feedback.newPlaceholder = function() {
mui(".image-list").each(function (idx,element) {
var fileInputArray = feedback.getFileInputArray(idx);
if (fileInputArray &&
fileInputArray.length > 0 &&
fileInputArray[fileInputArray.length - 1].parentNode.classList.contains('space')) {
return;
};
imageIndexIdNum++;
var placeholder = document.createElement('div');
placeholder.setAttribute('class', 'image-item space');
var up = document.createElement("div");
up.setAttribute('class','image-up')
//删除图片
var closeButton = document.createElement('div');
closeButton.setAttribute('class', 'image-close');
closeButton.innerHTML = 'X';
closeButton.id = "img-"+count;
//小X的点击事件
closeButton.addEventListener('tap', function(event) {
setTimeout(function() {
for(var temp=0;temp<feedback.files.length;temp++){
var strs= "imagesList"+idx;
if(feedback.files[temp].id==strs){
if(feedback.files[temp].childs.id==closeButton.id){
feedback.files.splice(temp,1);
}
}
}
document.getElementById('image-list'+idx).removeChild(placeholder);
}, 0);
return false;
}, false);
var fileInput = document.createElement('div');
fileInput.setAttribute('class', 'file');
fileInput.setAttribute('id', 'image-' + imageIndexIdNum);
fileInput.addEventListener('tap', function(event) {
var self = this;
var indexsd = (this.id).substr(-1);//每个加号
var btnArray = [{
title: "拍照"
}, {
title: "从相册选择"
}];
plus.nativeUI.actionSheet({
title: "选择照片",
cancel: "取消",
buttons: btnArray
}, function(e) {
var index = e.index;
switch (index) {
case 0:
break;
case 1:
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
plus.zip.compressImage({
src: entry.toLocalURL(),
dst: '_doc/camera/' + p,
overwrite: true,
format: "jpg",
width: "30%",
}, function(zip) {
if(zip.size > (1 * 1024 * 1024)) {
return mui.toast('文件超大,请调整相机重新拍照');
}
if (!self.parentNode.classList.contains('space')) { //已有图片
feedback.files.splice(indexsd-1,1,{id:"image-list"+idx,childs:{name:"images"+count,path:e}});
} else { //加号
placeholder.classList.remove('space');
feedback.addFile(idx, zip.target);
//feedback.addMorePicture(count,idx,zip);
feedback.newPlaceholder();
}
up.classList.remove('image-up');
placeholder.style.backgroundImage = 'url(' + zip.target + ')';
}, function(zipe) {
plus.nativeUI.closeWaiting();
mui.toast('压缩失败！')
});
}, function(e) {
plus.nativeUI.closeWaiting(); //获取图片失败,loading框取消
mui.toast('失败：' + e.message); //打印失败原因,或给出错误提示
});
}, function(e) {
plus.nativeUI.closeWaiting(); //开启照相机失败,关闭loading框
mui.toast('失败：' + e.message); //打印错误原因,给出错提示
}, {
filename: '_doc/camera/', //图片名字
index: 1 //摄像头id
});
break;
case 2:
plus.gallery.pick(function(e) {
for(var i in e.files) {
var fileSrc = e.files[i];
var name = fileSrc.substr(fileSrc.lastIndexOf('/') + 1);
plus.zip.compressImage({
src: fileSrc,
dst: '_doc/' + name,
overwrite: true,
quality: 50
}, function(zip) {
size += zip.size
if (size > (10*1024*1024)) {
return mui.toast('文件超大,请重新选择~');
}
if (!self.parentNode.classList.contains('space')) { //已有图片
feedback.files.splice(indexsd-1,1,{id:"image-list"+idx,childs:{name:"images"+count,path:e}});
feedback.addMorePicture(count,idx,zip);
} else { //加号
console.log(i+'=='+idx+'=='+count);
//placeholder.classList.remove('space');
feedback.addMoreFile(idx, i, zip.target);
feedback.addMorePicture(count,idx,zip);
feedback.newPlaceholder();
}
}, function(zipe) {
mui.toast('压缩失败！')
});
}
feedback.newPlaceholder();
}, function(e) {
mui.toast(e.message);
},{
filter: "image",
multiple: true,
maximum: 5,
system: false,
onmaxed: function() {
plus.nativeUI.alert('最多只能选择5张图片');
}
});
break;
}
});
}, false);
placeholder.appendChild(closeButton);
placeholder.appendChild(up);
placeholder.appendChild(fileInput);
document.getElementById('image-list'+idx).appendChild(placeholder);
});
}
feedback.addMorePicture = function(flag, idx, zip) {
var placeholder = document.createElement('div');
placeholder.setAttribute('class', 'image-item');
var up = document.createElement("div");
//删除图片
var closeButton = document.createElement('div');
closeButton.setAttribute('class', 'image-close');
closeButton.innerHTML = 'X';
closeButton.id = "img-"+flag;
//小X的点击事件
closeButton.addEventListener('tap', function(event) {
setTimeout(function() {
for(var temp=0;temp<feedback.files.length;temp++){
var strs= "imagesList"+idx;
if(feedback.files[temp].id==strs){
if(feedback.files[temp].childs.id==closeButton.id){
feedback.files.splice(temp,1);
}
}
}
document.getElementById('image-list'+idx).removeChild(placeholder);
}, 0);
return false;
}, false);
placeholder.style.backgroundImage = 'url(' + zip.target + ')';
placeholder.appendChild(closeButton);
placeholder.appendChild(up);
//向前追加
var first = document.getElementById('image-list'+idx).firstChild;
document.getElementById('image-list'+idx).insertBefore(placeholder,first);
//向后追加
//document.getElementById('image-list'+idx).appendChild(placeholder);
};
feedback.newPlaceholder();
})();
</script>
</html>
开发时用的是HBuilder工具开发的，在5+环境下连接到的手机运行；
如何在HBuilder下真机运行可参考：https://www.cnblogs.com/lhjfly/p/10451432.html
效果：
