HTML5 Plus 拍照或者相册选择图片上传

wozhaoying · 发表于 2023-11-15 14:07:20

<!DOCTYPE HTML>
<html>
<head>
<title>情报制作</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../css/mui.min.css">
<link rel="stylesheet" href="../css/font-awesome-4.7.0/css/font-awesome.css" />
<script src="../js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body style="background-color: #f3f6f9;">
<div style="height:500px;width:500px;overflow: hidden;">
<img src="" alt="" id="albumCoverImg" style="width:100%;"/>
</div>
<button type="button" onclick="appendByGallery()">相册</button>
<button type="button" onclick="appendByCamera()">拍摄</button>
<script src="../js/mui.js"></script>
<script type="text/javascript">
//扩展API完成后执行的操作
function plusReady(){
//page.imgUp();
}
//弹出系统按钮选择框
/*var page=null;
page={
imgUp:function(){
var m=this;
plus.nativeUI.actionSheet({cancel:"取消",buttons:[
{title:"拍照"},
{title:"从相册中选择"}
]}, function(e){//1 是拍照 2 从相册中选择
switch(e.index){
case 1:appendByCamera();break;
case 2:appendByGallery();break;
}
});
}
} */
// 拍照添加文件
function appendByCamera(){
plus.camera.getCamera().captureImage(function(e){
console.log("e is" + e);
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var path = entry.toLocalURL();
$("#albumCoverImg").src = path;
$("#albumCoverImg").attr("src",path) ;
upload(path);
}, function(e) {
mui.toast("读取拍照文件错误：" + e.message);
});
});
}
// 从相册添加文件
function appendByGallery(){
plus.gallery.pick(function(path){
console.log(path);
$("#albumCoverImg").attr("src",path) ;
upload(path);
});
}
//服务端接口路径
var server ='http://192.168.100.149:8085/packagePK/package/uploadImg';
// 上传文件
function upload(path){
console.log(server)
var wt=plus.nativeUI.showWaiting();
var task=plus.uploader.createUpload(server,
{method:"POST"},
function(t,status){ //上传完成
if(status==200){
var data=JSON.parse(t.responseText);
console.log(data.data);
alert("上传成功："+t.responseText);
wt.close(); //关闭等待提示按钮
}else{
alert("上传失败："+status);
wt.close();//关闭等待提示按钮
}
}
);
//添加其他参数
task.addData("name","test");
task.addFile(path,{key:"file"});
task.start();
}
//扩展API是否准备好，如果没有准备好则监听plusReady
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
</script>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册