Hbuider hybrid app 开发之上传图片

（更多精彩内容请访问DCloud官网（http://www.dcloud.io/））

目标：获取手机本地图片，并上传到服务器端。通过拍照和选择相册两种方式获取本地图片。
说明：注意plus对象的使用，查看官方文档，学好基础最重要。官方文档
其他说明：以下代码展示的是最基本的图片上传，复杂操作可参考图片上传；服务器代码demo参考服务器端

1. 获取本地图片方法实现

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('上传失败，请重试');
           }
    });  
});