MUI 图片+数据上传解决方案

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>首页</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<style>
html,
body {
background-color: #efeff4;
}

.title {
margin: 20px 15px 10px;
color: #6d6d72;
font-size: 15px;
padding-bottom: 51px;
}
</style>
</head>

<body>
<div class="mui-content">

<img id="headImage" class="my_img_class" width="100px" height="200px" />
<img id="task-img" class="my_img_class" width="100px" height="200px" />
<button id="up">上传</button>
</div>
<script type="text/javascript" src="js/mui.js" ></script>
<script type="text/javascript" src="js/mui.min.js" ></script>
<script src="js/util.js"></script>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
document.getElementById('headImage').addEventListener('tap', function() {
if (mui.os.plus) {
var buttonTit = [{
title: "拍照"
}, {
title: "从手机相册选择"
}];

plus.nativeUI.actionSheet({
title: "上传图片",
cancel: "取消",
buttons: buttonTit
}, function(b) { /*actionSheet 按钮点击事件*/
switch (b.index) {
case 0:
break;
case 1:
getImage(); /*拍照*/
break;
case 2:
galleryImg();/*打开相册*/
break;
default:
break;
}
})
}
}, false);

// 拍照获取图片
function getImage() {
plus.camera.getCamera().captureImage(function(e){
//console.log("e is" + e);
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var path = entry.toLocalURL();
var task_img=document.getElementById('task-img');
task_img.src=path;
}, function(e) {
mui.toast("读取拍照文件错误：" + e.message);
});
});
}

//从相册中选择图片
function galleryImg(){
// 从相册中选择图片
plus.gallery.pick(function(path){
// 其他操作,比如预览展示

var task_img=document.getElementById('task-img');
task_img.src=path;
upload();
});
}
// 上传的方法
function upload(){
//MicroTaskGUID = common.guid();

var rul = "http://192.168.0.100:8080/travelapp/Api/Travel/addTravel";

var imgsArr = mui("#task-img"); // 要上传的 img 标签

mui.each(imgsArr, function(index, item){
// console.log(index)
// console.log(item.src)
createUp(item)
})
function createUp (files) {
var task = plus.uploader.createUpload(rul,
{method:"POST"},
function(t,status){ //上传完成
if(status==200){
console.log("上传成功："+t.responseText);
}else{
console.log("上传失败："+status);
}
}
);
//添加其他参数
task.addData("key","25f9e794323b453885f5181f1b624d0b");
task.addData("userid",1);
task.addData("title","title");
task.addData("startpos","began_place");
task.addData("endpos","end_place");
task.addData("starttime","first_time");
task.addData("backtime","last_time");
task.addData("sendmon",11);
task.addData("sendmon",11);
task.addData("des","conten_text");
// 页面中要上传的图片路径
task.addFile(files.src,{key:files.src});
task.start();
}
}

</script>
</body>

</html>

MUI 图片+数据 上传解决方案

猜你喜欢

MUI 图片+数据上传解决方案