mui代码
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/previewimage.css" />
</head>
<body>
<header 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="mui-content">
<div class="recommend-body">
<textarea id="details" class="recommend-area" rows="5" placeholder="分享新鲜事..."></textarea>
<div class="letter-photo" id="letter-photo">
<!--<img src="images/test.jpg" data-preview-src="" data-preview-group="1" />
<img src="images/test.jpg" data-preview-src="" data-preview-group="1" />
<img src="images/test.jpg" data-preview-src="" data-preview-group="1" />-->
</div>
<div class="recommend-img" id="loadphoto">
<img src="img/照相.png" />
</div>
<div class="sub-btn-recommend">
<button id="sub" class="btn-recommend" style="margin-left: 80%;">提交</button>
</div>
</div>
</div>
</body>
<script src="js/mui.min.js"></script>
<script src="js/jquery-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.zoom.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init()
mui.previewImage();
var sub = document.getElementById('sub')
var url = localStorage.getItem('url')
var photo = document.getElementById('loadphoto')
//点击相机长传图片
photo.addEventListener('tap', function() {
if($('#letter-photo').children().size() < 6) {
var btnArray = [{
title: "打开照相机"
}, {
title: "打开相册"
}]; //选择按钮 1 2 3
plus.nativeUI.actionSheet({
title: "请选择",
cancel: "取消", // 0
buttons: btnArray
},
function(e) {
var index = e.index; //
//alert(index);
switch(index) {
case 1:
//写自己的逻辑
camera();
break;
case 2:
xiangce();
break;
}
})
} else {
mui.alert('最多只能选取六张图片')
}
})
var imgArray = new Array()
sub.addEventListener('tap', function() {
var details = document.getElementById('details').value
if(details === null || details === ''){
mui.alert('不要忘记分享你的新鲜事哦', '提示')
return
}
var img = document.getElementsByClassName('load-img')
for(var i = 0; i < img.length; i++) {
// img[i].onload = function() {
var data = getBase64Image(img[i]); //base64编码
var newImgbase = data.split(",")[1]; //通过逗号分割到新的编码
imgArray.push(newImgbase); //放到imgArray数组里面
//}
}
var imgJson = JSON.stringify(imgArray);
console.log(imgJson)
mui.post(url + 'insletter.do', {
'details': details,
'pic': imgJson
}, function(data) {
mui.toast('发送成功', {
duration: 'long',
type: 'div'
})
var loginx = {
LogOut: function(callback) {
//do something
//callback
callback && callback()
}
}
//关闭所有页面
loginx.LogOut(function() {
if(mui.os.ios || mui.os.ipad || mui.os.iphone) {
// 获取所有Webview窗口
var curr = plus.webview.currentWebview();
var wvs = plus.webview.all();
for(var i = 0, len = wvs.length; i < len; i++) {
//关闭除setting页面外的其他页面
if(wvs[i].getURL() == curr.getURL())
continue;
plus.webview.close(wvs[i]);
}
//打开login页面后再关闭setting页面
plus.webview.open('tab_footer.html');
curr.close();
} else
plus.runtime.quit();
})
}, 'json');
})
//调用相机
function camera() {
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
//成功
plus.io.resolveLocalFileSystemURL(p, function(entry) {
img_name = entry.name; //获得图片名称
img_src = entry.toLocalURL(); //获得图片路径
//var url1=document.getElementById('img');
//url1.src=img_path;
//将图片渲染到页面
var temp = '<div class="letter-photo-img">' +
'<img src="' + img_src + '" class="load-img" data-preview-src="" data-preview-group="1">' +
'</div>'
$('#letter-photo').append(temp)
}, function(e) {
console.log("读取拍照文件错误：" + e.message);
});
}, function(e) {
console.log("失败：" + e.message);
}, {
filename: '_doc/camera/',
index: 1
});
}
//打开相册
function xiangce() {
plus.gallery.pick(function(path) {
for(var i in path.files) {
var fileSrc = path.files[i]
var temp = ''
//渲染到页面
temp = '<div class="letter-photo-img">' +
'<img src="' + fileSrc + '" class="load-img" data-preview-src="" data-preview-group="1">' +
'</div>'
$('#letter-photo').append(temp)
}
}, function(e) {
console.log("取消选择图片");
}, {
filter: "image",
multiple: true,
maximum: 6,
system: false,
onmaxed: function() {
plus.nativeUI.alert('最多只能选择6张图片');
}
});
}
//base64编码
function getBase64Image(img) {
var canvas = document.createElement("canvas"); //创建canvas DOM元素，并设置其宽高和图片一样
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height); //使用画布画图
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); //动态截取图片的格式
var dataURL = canvas.toDataURL("image/" + ext); //返回的是一串Base64编码的URL并指定格式
return dataURL;
}
</script>
</html>
后台采用SSM框架接收图片（Service层）
public int insLetter(Letter l, String[] pic, HttpSession session, HttpServletRequest request) {
l.setAmount(0);
l.setLetter_status("0");
Users u = (Users) session.getAttribute("users");
l.setUserid(u.getUserid());
String str = l.getDetails();
l.setDetails(EmojiParser.parseToAliases(str));
String rootPath = request.getServletContext().getRealPath("/");
String relativePath = "letterImg";
String path = "";
for (String p : pic) {
System.out.println();
String id = UUID.randomUUID().toString();
p = p.substring(p.indexOf("\"")+1, p.lastIndexOf("\""));
File f = new File(rootPath + File.separator + relativePath);
path += relativePath + "\\" + id +".png,";
Base64.GenerateImage(p, rootPath + File.separator + relativePath+"\\"+id+".png");
}
l.setLetter_src(path);
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH-mm-ss");
Date time = new Date();
try {
time= sdf.parse(sdf.format(time));
} catch (Exception e) {
e.printStackTrace();
}
l.setPosted_time(time);
//存入数据库
int flag = letterMapper.insertLetter(l);
return flag;
}
225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
