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) {}); };