(更多精彩内容请访问DCloud官网(http://www.dcloud.io/))
目标:获取手机本地图片,并上传到服务器端。通过拍照和选择相册两种方式获取本地图片。
说明:注意plus对象的使用,查看官方文档,学好基础最重要。官方文档
其他说明:以下代码展示的是最基本的图片上传,复杂操作可参考图片上传;服务器代码demo参考服务器端
- 获取本地图片方法实现
plus.nativeUI.actionSheet({cancel:"取消",buttons:[{title:"拍照上传"},{title:"相册选择"}]}, function(e){
if(e.index == 0) return;
if(e.index == 1){
plus.camera.getCamera(1).captureImage(function(p){
//上传图片
avatarUpload(plus.io.convertLocalFileSystemURL(p));
});
}else if(e.index == 2){
plus.gallery.pick(function(p){
avatarUpload(p);
},{
filter:"image",
multiple:false //单选图片(true:多选图片)
})
}
});
//多选图片
function galleryImgs() {
// 从相册中选择图片
plus.gallery.pick(function(e) {
for(var i in e.files) {
console.log(e.files[i]);//选取的图片数组
}
}, function(e) {
mui.toast("取消选择图片");
}, {
filter: "image",
multiple: true
});
}
2.上传方法的实现
/**
* @description上传头像
* @param avatar 图片路径
* */
function avatarUpload(avatar){
var task = gettask('接口url', function(t, status) {//创建上传任务
if(status == 200){//返回状态
var data = JSON.parse(t.responseText || '{}');
mui.toast(data.msg || '上传成功');
avatarObj.src = avatar;
}else{
_.toast("保存失败,请重试");
}
});
task.addData('token', token);//后台接口设定的参数
task.addData('privateToken', privateToken);//后台接口设定的参数
task.addFile(avatar,{key:"avatar"});//所上传文件
task.start();//开始上传任务
}
//创建上传任务
function gettask(server, callback) {
return plus.uploader.createUpload( "服务器地址"+server, {
method: "POST"
}, callback);
}
移动端web项目上传图片常用方式:
1.引入jq相关库
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript" src="../js/jquery.form.js" ></script>
2.写form
<form name="form" id="upPhoto" enctype="multipart/form-data" >
<input type="file" disabled="disabled" id="file" name="avatar" style="display: none;" accept="image/jpeg, image/gif,image/jpg"/>
</form>
3.js实现上传
//点击上传头像
$("#file").trigger('click');//触发选择上传文件
//监听图片change事件,表单提交来进行上传图片
$("#file").bind("change",function(){
var file = this.files[0] ? this.files[0] : null;
if (!file) { return false; }
mui.toast("正在上传...");
//开始ajax操作 上传图片
$("#upPhoto").ajaxSubmit({
type: ASK_TYPE,//提交类型
dataType: DATA_TYPE,//返回结果格式
url: 'xxxx',//请求地址
async: true, data: {xxxx},//请求数据
success: function (data) {//请求成功后的函数
if(data.status == 0) {//返回成功
mui.toast("上传成功!");
}else{
mui.toast(data.msg || '上传失败,请重试');
}
},
error:function(xhr){
mui.toast('上传失败,请重试');
}
});
});