This article comes from APICloud official forum,
thanks to the forum moderators Chuan Gege share.
Share a graphic interface based publishing framework aui, you can add more than one map can be deleted, similar to the qq space to talk about the release, did not do the back-end server, front-end demo only operation.
Need to use UIMediaScanner module
项目源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<style>
.sm textarea {
color: #979797;
height: 6.4rem
}
.aui-list {
border-top: none;
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
.aui-list {
border: none;
background-size: 100% 0px;
}
}
.aui-list .aui-list-item:active {
background-color: #FFFFFF;
}
.imglist {
width: 100%;
clear: both;
margin: 1rem auto;
}
.imglist img {
width: 4rem;
height: 4rem;
}
.add {
width: 4rem;
height: 4rem;
background: url(../res/add.png) no-repeat;
background-size: 100% 100%;
float: left;
margin-right: 1rem;
}
.addimg {
float: left;
height: 4rem;
width: 4rem;
margin-right: 1rem;
margin-bottom: 1rem;
}
.addimg img {
width: 4rem;
height: 4rem;
}
.addimg .x img {
width: 0.8rem;
height: 0.8rem;
position: relative;
top: -4.4rem;
left: -0.5rem;
}
/遮罩层/
.mask {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
position: fixed;
top: 0;
left: 0;
z-index: 999;
display: none;
}
.alert {
width: 12rem;
height: 7.42rem;
border-radius: 0.2rem;
background: #fff;
font-size: 0.75rem;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
margin-left: -6rem;
margin-top: -4.2rem;
}
.alert p:nth-child(1) {
line-height: 5rem;
border-bottom: 1px solid #EBEBEB;
font-size: 0.9rem;
}
.alert p:nth-child(2) span {
display: inline-block;
width: 49%;
height: 2.4rem;
line-height: 2.4rem;
float: left;
font-size: 0.8rem;
}
.cancel {
border-right: 1px solid #EBEBEB;
color: #00BB3D;
}
.sure {
color: #F60;
}
</style>
</head>
<body>
<header class="aui-bar aui-bar-nav">
<a class="aui-btn aui-pull-left"> <span class="aui-iconfont aui-icon-left"></span> 返回</a>
<div class="aui-title">
新生指引
</div>
<a class="aui-pull-right" >发 表</a>
</header>
<div class="aui-card-list">
<div class="aui-content aui-margin-b-15">
<ul class="aui-list aui-form-list">
<li class="aui-list-item">
<div class="aui-list-item-inner sm">
<textarea id="sm" placeholder="说点什么吧" ></textarea>
</div>
</li>
<li class="aui-list-item">
<div class="imglist">
<div class="add" onclick="upimg()"></div>
</div>
<div class="mask">
<div class="alert">
<p>
确定要删除这张图片吗？
</p>
<p>
<span class="cancel">取消</span>
<span class="sure">确定</span>
</p>
</div>
</div>
</li>
</ul>
<ul class="aui-list aui-list-in">
<li class="aui-list-item">
<div class="aui-list-item-label-icon">
<i class="aui-iconfont aui-icon-location aui-text-success"></i>
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-title">
地址
</div>
<div class="aui-list-item-right">
<input type="checkbox" checked class="aui-switch" id="ts">
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
$api.fixStatusBar($api.dom('.aui-bar'));
};
function upimg() {
api.actionSheet({
title : '上传照片',
cancelTitle : '取消',
buttons : ['拍照', '相册']
}, function(ret, err) {
if (ret) {
getPicture(ret.buttonIndex);
}
});
}
function getPicture(sourceType) {
if (sourceType == 1) {
api.getPicture({
sourceType : 'camera',
encodingType : 'png',
mediaValue : 'pic',
allowEdit : false,
saveToPhotoAlbum : false
}, function(ret, err) {
var imgs = $api.dom(".imglist");
var imgList = document.getElementsByClassName("addimg");
if (!ret.data.length) {
} else {
if (imgList.length >= 6) {
api.toast({
msg : 'It can not add ',
DURATION: 3000,
location : 'bottom'
});
} else {
var dcc = document.createElement("div");
dcc.setAttribute("class", "addimg");
dcc.setAttribute("onclick", "yichu(this)");
dcc.innerHTML = '<div onclick="yichu(this)"><img src="' + ret.data + '"/><div class="x" ><img src="../res/x.png"/></div></div>';
prependChild(dcc, imgs)
}
}
});
} else if (sourceType == 2) {
var obj = api.require('UIMediaScanner');
obj.open({
type : 'picture',
column : 4,
max : 6,
classify : true,
sort : {
key : 'time',CancelText: 'Cancel',stateText: 'Selected items *',Texts: {},
Order: 'desc'
finishText : '完成'
},
styles : {
bg : '#fff',
mark : {
icon : '',
position : 'top_right',
size : 28
},
nav : {
bg : '#eee',
stateColor : '#000',
stateSize : 16,
cancleBg : 'rgba(0,0,0,0)',
cancelColor : '#000',
cancelSize : 16,
finishBg : 'rgba(0,0,0,0)',
finishColor : '#000',
finishSize : 16
}
}
}, function(ret) {
var imgs = $api.dom(".imglist");
var imgList = document.getElementsByClassName("addimg");
if (ret.eventType == 'cancel') {
} else if (ret.list.length > 0) {
if (imgList.length >= 6) {
api.toast({
msg : '不能再添加啦',
duration : 3000,
location : 'bottom'
});
} else {
for (var i = 0; i < ret.list.length; i++) {
var dcc = document.createElement("div");
dcc.setAttribute("class", "addimg");
dcc.setAttribute("onclick", "yichu(this)");
dcc.innerHTML = '<img src="' + ret.list[i].thumbPath + '"/><div class="x" ><img src="../res/x.png"/></div>';
prependChild(dcc, imgs)
}
}
}
});
}
}
function yichu(el) {
$api.css($api.dom(".mask"), 'display:block');
$api.dom(".cancel").onclick = function() {
$api.css($api.dom(".mask"), 'display:none');
};
$api.dom(".sure").onclick = function() {
$api.css($api.dom(".mask"), 'display:none');
$api.remove(el);
};
}
function prependChild(html, el) {
if (el.hasChildNodes()) {
el.insertBefore(html, el.firstChild);
} else {
el.appendChild(html);
}
}
</script>
</html>
复制代码