mui的base64多图片上传

<!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">

</div>
<div class="recommend-img" id="loadphoto">
<img src="img/照相.png" />
</div>
<div id="imgJson">

</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.9.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.zoom.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/data.js" ></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 jsonDatas = {};
var img = document.getElementsByClassName('load-img');
for(var i = 0; i < img.length; i++) {
// img[i].onload = function() {
var data = getBase64Image(img[i]); //base64编码
jsonDatas['uploadurl'+(i+1)] = data;
//console.log("newImgbase:"+data);
// var newImgbase = data.split(",")[1]; //通过逗号分割到新的编码

imgArray.push(jsonDatas);
// imgArray.push(data); //放到imgArray数组里面
//}
}
var imgJson = JSON.stringify(imgArray);

alert("imgJson:"+imgJson)
//document.getElementById("imgJson").innerText = imgJson;
mui.ajax(url+"/api/user/upload/uploads_base", {
data: {
'img': imgJson
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
headers: {
'Content-Type': 'application/json',
'XX-Token': token,
'XX-Device-Type': 'android'
},
success: function(res) {
wt.close();
mask.close();
if(res.code == 1) {
mui.toast("上传成功" + res.data.url);
var product_img = res.data.url;
document.getElementById("product_img").innerText = product_img;
document.getElementById("picture").style.visibility = "hidden"; //隐藏

} else {
mui.toast("失败" + res.data.url);
}
},
error: function(xhr, type, errorThrown) {
//异常处理；
console.log(type);
}
})
// 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>

mui的base64多图片上传

猜你喜欢