本案例是上传图片案例,可以进行图片选择和拍照操作。
使用时主要修改有以下几个:
1、var head_pho = document.getElementById('head_pho');这里修改成获取事件id
2、task.addData('token', token); 在此可以设置参数
3、task.addFile(filepath, { key: "personImage" }); filepath为图片路径,key是服务端接收图片的参数
4、plus.uploader.createUpload 在这里设置成服务端上传图片接口
以下为代码
var head_pho = document.getElementById('head_pho');
mui.plusReady(function() {
// 文件路径
var filepath;
head_pho.addEventListener('tap', function() {
if (mui.os.plus) {
var a = [{
title: '拍照'
}, {
title: '从手机相册选择'
}];
plus.nativeUI.actionSheet({
title: '修改头像',
cancel: '取消',
buttons: a
}, function(b) {
switch (b.index) {
case 0:
break;
case 1:
//拍照
getImages();
break;
case 2:
//打开相册
galleryImages();
break;
default:
break;
}
}, false);
}
});
//拍照
function getImages() {
var mobileCamera = plus.camera.getCamera();
mobileCamera.captureImage(function(e) {
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var path = entry.toLocalURL() + '?version=' + new Date().getTime();
var dstname = "_downloads/" + getUid() + ".jpg"; //设置压缩后图片的路径
compressImage(path, dstname, 0);
}, function(err) {
console.log("读取拍照文件错误");
});
}, function(e) {
console.log("er", err);
}, function() {
filename: '_doc/head.png';
});
}
//从本地相册选择
function galleryImages() {
plus.gallery.pick(function(a) {
plus.io.resolveLocalFileSystemURL(a, function(entry) {
plus.io.resolveLocalFileSystemURL('_doc/', function(root) {
root.getFile('head.png', {}, function(file) {
//文件已经存在
file.remove(function() {
console.log("文件移除成功");
entry.copyTo(root, 'head.png', function(e) {
var path = e.fullPath + '?version=' + new Date().getTime();
var dstname = "_downloads/" + getUid() + ".jpg"; //设置压缩后图片的路径
compressImage(path, dstname, 270);
}, function(err) {
console.log("copy image fail: ", err);
});
}, function(err) {
console.log("删除图片失败:(" + JSON.stringify(err) + ")");
});
}, function(err) {
//打开文件失败
entry.copyTo(root, 'head.png', function(e) {
var path = e.fullPath + '?version=' + new Date().getTime();
uploadHeadImg(path);
}, function(err) {
console.log("上传图片失败:(" + JSON.stringify(err) + ")");
});
});
}, function(e) {
console.log("读取文件夹失败:(" + JSON.stringify(err) + ")");
});
});
}, function(err) {
console.log("读取拍照文件失败: ", err);
}, {
filter: 'image'
});
}
// 产生一个随机数
function getUid() {
return Math.floor(Math.random() * 100000000 + 10000000).toString();
}
// 上传操作
function upload() {
var task = plus.uploader.createUpload(getUrl() + 'com_uploadPersonImage.action', {
method: "POST"
},
function(t, status) { //上传完成
if (status == 200) {
console.log(t.responseText);
// imgdiv.innerHTML = '<img id="userImg" src="' + t.responseText + '"/>';
} else {
console.log("上传失败:" + status);
}
});
task.addData('token', token);
task.addFile(filepath, {
key: "personImage"
});
task.start();
}
// 进行图片压缩
function compressImage(src, dstname, rotate) {
plus.zip.compressImage({
src: src,
dst: dstname,
overwrite: true,
quality: 20,
rotate: rotate
},
function(event) {
console.log("Compress success:" + event.target);
filepath = event.target;
upload();
},
function(error) {
console.log(error);
});
}
})
1 个评论
要回复文章请先登录或注册
1***@163.com