• h5 plus 上传图片


    <div class="img-box" style="height:auto;">
    	<img id='travelimg' class="uploadImg" src="../../images/driver/yy.png" style="height:auto;" />
    </div>
    

      提交数据

    function uploadImg(){
    	// 接口令牌
    	var token = user.getState('token');
        var group_name = $('#company_name').val();
        if (!group_name) {
            mui.toast('公司名称不能为空!');
            return false;
        }
        var group_id = user.getState('group_id');
        var url = request.ServerUrl + request.app_personal_attestation;
        console.log(url);
    	// 营业执照图片
    	var travelimg = document.getElementById('travelimg').getAttribute('src');
        var travelimg_row = document.getElementById('travelimg_row').getAttribute('src');
        if (travelimg == '../../images/driver/yy.png') {
            mui.toast('请上传营业执照!');
            return false;
        }
        if (travelimg_row == '../../images/driver/operate.png') {
            mui.toast('请上传营运证!');
            return false;
        }
    	var wt = plus.nativeUI.showWaiting();
    
    	// 运营证图片
    	// var operateimg = document.getElementById('operateimg').getAttribute('src');
    	// 车辆照片:右前方45°侧面照
    	// var carimage = document.getElementById('carimage').getAttribute('src');
    	// 创建上传列表
    	var task = plus.uploader.createUpload(url, {  
        	method: "post"  
       }, function(t, status) {  
    	    console.log(JSON.stringify(t));
    	    console.log(status);
            if(status == 200) { 
               	// mui.toast("上传成功!");
                // wt.close(); //关闭等待提示按钮
                // plus.webview.currentWebview().opener().evalJS('reload()');
                // mui.back();
            }else{
                // mui.toast("上传失败:"+t);
                // wt.close();//关闭等待提示按钮
            }
        });
    	// 添加文件
        task.addFile(travelimg, {key:"file"});
        task.addFile(travelimg_row, {key:"travelimg_row"});
        // 添加其他参数  接口令牌
        task.addData("token",token);
        task.addData("group_name",group_name);
        // 添加其他参数 车型ID
        task.addData("group_id",group_id);
        console.log('group_id:'+group_id);
        console.log('task:'+JSON.stringify(task));
    	
    	console.log("=========添加车辆信息=========="+JSON.stringify(task));
    	
        task.addEventListener( "statechanged", function(upload,status){
        	if ( upload.state == 4 && status == 200 ) {
    			// 上传完成
    			console.log( "Upload success: " + upload.responseText );
                var res = JSON.parse(BASE64.decode(upload.responseText));
                console.log(JSON.stringify(res));
                var code = res.code;
                var msg = res.msg;
                if (code != 200) {
                    mui.toast(msg);
                    if (code == 404) {
                        openLogin();
                    }
                } else {
                    mui.toast(msg);
                    wt.close(); //关闭等待提示按钮
                    mui.back();
                }
    		} else {
                mui.toast("上传失败:"+t);
            }
        } , false );
        // 开始上传 
        task.start();
     
    };
    

      选择或拍照

    /*
     * @description: 点击图片选择选择图片的方式
     * @parms 
     * */
    mui('body').on('tap','.uploadImg',function(){
    	var self = this;
    	if(window.plus){
    		actionSheet(self);
    	}else{
    		document.addEventListener("plusready",function(){
    			actionSheet(self);
    		},false);
    	}
    }); 
    
    /*
     * @description: 选择
     * @parms self 点击的图片
     * */
    function actionSheet(self){
    	plus.nativeUI.actionSheet({cancel:"取消",buttons:[  
            {title:"拍照"},  
            {title:"从相册中选择"}  
        ]}, function(e){//1 是拍照  2 从相册中选择  
            switch(e.index){  
                case 1:getImage(self);break;  
                case 2:getGalleryImage(self);break;  
            }  
        });  
    }
    
    /*
     * @description: 拍照
     * @parms self 点击的图片
     * */
    function getImage(self){
    	// 获取照相机对象
    	var cmr = plus.camera.getCamera();
    	// 图片的分辨率 320*240
        var res = cmr.supportedImageResolutions[0];
    	// 图片的格式jpg
        var fmt = cmr.supportedImageFormats[0];
    	// 进行拍照操作
        cmr.captureImage(function(path) {  
            // 读取文件
            plus.io.resolveLocalFileSystemURL(path, function(entry) {  
            	// 转化路径
                var localUrl = entry.toLocalURL();
                // 压缩上传
                plus.zip.compressImage({  
                    src: localUrl,  
                    dst: "_doc/chat/camera/" + localUrl,  
                    quality: 20,  
                    overwrite: true  
                }, function(e) {  
                	console.log("压缩成功" + e.target);
                	// 显示图片
                	self.setAttribute('src',e.target);
                    $(self).attr('src',e.target);
                }, function(err) {  
                    console.log("压缩失败:  " + err.message);  
                });  
            });  
        }, function(err) {  
            console.error("拍照失败:" + err.message);  
        }, {  
            index: 1  
        });  
    }
    
    /*
     * @description: 从相册中选择文件
     * @parms self 点击的图片
     * */
    function getGalleryImage(self) { 
    	// 从系统相册选择文件
        plus.gallery.pick(function(path) {
        	// 压缩文件
            plus.zip.compressImage({  
                src: path,  
                dst: "_doc/chat/gallery/" + path,  
                quality: 20,  
                overwrite: true  
            }, function(e) {  
            	console.log("压缩成功" + e.target);
            	// 显示图片
            	self.setAttribute('src',e.target);
                $(self).attr('src',e.target);
            }, function(err) {  
                console.error("压缩失败:" + err.message);  
            });  
        }, function(err) {});  
    };
    

      

  • 相关阅读:
    类的继承
    面向对象的编程
    Python的模块
    ES6_12_Set和Map数据结构以及for of循环
    ES6_11_字符串、数值、数组、对象扩展
    ES6_09_Generator函数
    ES6_08_Iterator遍历器
    ES6_07_Symbol属性
    ES6_05_三点运算符和形参默认值
    Sqlstate解释
  • 原文地址:https://www.cnblogs.com/peipeiyu/p/14155958.html
Copyright © 2020-2023  润新知