微信H5页面调起相册和摄像头，实现图片上传，并上传到本地服务器

1、config权限配置

$.ajax({url:'wx_getConfig',            type:'get',dataType:'json',async:false,success:function(data){var appId = data[0].appId;var timestamp = data[0].timestamp;var nonceStr = data[0].nonceStr;var signature = data[0].signature;wx.config({  debug: false,//调试模式   当为tru时，开启调试模式 appId: appId,  timestamp: timestamp.toString(),//签名时间戳nonceStr: nonceStr, //生成签名的随机串 signature: signature,//签名                    jsApiList: ['chooseImage','uploadImage','getLocalImgData','downloadImage'],success:function(){alert("配置成功")},fail:function(){alert("配置失败")}});  },error:function(){alert("error");}
})

2、config配置成功

当config配置成功后，就会执行ready函数，所有的操作必须等到config配置完成后才会执行，如果是页面加载就执行的操作，就必须放在ready中执行。如果是在被触发时执行的操作，则不需要放在ready中

wx.ready(function () {// 在这里调用 APIwx.checkJsApi({jsApiList: ['chooseImage','uploadImage','getLocalImgData','downloadImage'],success: function (res) {console.log(JSON.stringify(res));}});
});

3、调取摄像头和相册

function takePicture(nums) {  wx.chooseImage({  count: 1,  needResult: 1,  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  success: function (data) {                  localIds = data.localIds[0];   // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片                           var num1 = nums;wxuploadImage(localIds,num1);wxgetLocalImgData(localIds,num1);},  fail: function (res) {            alterShowMessage("操作提示", JSON.stringify(res), "1", "确定", "", "", "");  }    });  }

4、上传到微信服务器

function wxuploadImage(e,num) {var $hiddenImg= $(".hiddenImg");wx.uploadImage({  localId: e, // 需要上传的图片的本地ID，由chooseImage接口获得  isShowProgressTips: 1, // 默认为1，显示进度提示  success: function (res) {                                        mediaId = res.serverId;                    wxdownloadImage(mediaId)$($hiddenImg[num]).val(mediaId);          },  fail: function (error) {  picPath = '';  localIds = '';  alert(Json.stringify(error));          }          });
}

此时的图片上传，是将图片上传到微信服务器，我们可以根据获取到的medisId 将图片下载到本地服务器。

5、获取本地图片接口，在本地显示

function wxgetLocalImgData(e,num){var $myimg = $(".myimg");    if(window.__wxjs_is_wkwebview){wx.getLocalImgData({localId: e, // 图片的localIDsuccess: function (res) {                    var localData = res.localData; // localData是图片的base64数据，可以用img标签显示localData = localData.replace('jgp', 'jpeg');//iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下                                            $($myimg[num]).attr("src", localData);},fail:function(res){alert("显示失败");}});}else{$($myimg[num]).attr("src", e);}
}

此接口仅在 iOS WKWebview 下提供，用于兼容 iOS WKWebview 不支持 localId 直接显示图片的问题

6、提交到本地服务器，实现本地上传

function tijiao(){var userInfo = JSON.parse(localStorage.getItem("UserInfoKey"));var user = JSON.parse(localStorage.getItem("user"));var userId = user.userId;var company = userInfo.mainInfo;var kfCompanyProvince = userInfo.kfCompanyProvince;var kfCompanyCity = userInfo.kfCompanyCity;var kfCompanyDistrict = userInfo.kfCompanyDistrict;var companyAddress = userInfo.detailAddress;var userType = user.userType;var userName = userInfo.contacts;var principalPhoneCode = userInfo.phone;var img1 = $($(".hiddenImg")[0]).val();var img3 = $($(".hiddenImg")[1]).val();var img5 = $($(".hiddenImg")[2]).val();var img6 = $($(".hiddenImg")[3]).val();var img7 = $($(".hiddenImg")[4]).val();    $.ajax({url:'user_uploadInformation',data:{"userId":userId,"company":company,"kfCompanyProvince":kfCompanyProvince,"kfCompanyCity":kfCompanyCity,"kfCompanyDistrict":kfCompanyDistrict,"companyAddress":companyAddress,"userType":userType,"userName":userName,"principalPhoneCode":principalPhoneCode,"img1":img1,"img3":img3,"img5":img5,"img6":img6,"img7":img7},type:'post',dataType:'json',async:false,success:function(data){if(data.code == 0){mui.alert("认证失败，请重新认证")}else if(data.code == 1){mui.alert("申请提交成功，请稍后",function(){window.location.href="../../index/carManLookImg.jsp"})}},error:function(data){alert("上传失败")}})
}

微信H5页面调起相册和摄像头，实现图片上传，并上传到本地服务器相关推荐

前端如何在H5页面调起微信支付
在微信服务号开发的时候经常会遇到微信支付的功能实现,通过实际经验自己总结了一下,前端在H5页面调起微信支付有两种办法,一是利用内置对象,二是通过引用微信的js sdk,亲测都能支付成功,从写法上来看用 ...
微信h5页面实现人脸注册和登陆
工作中总会遇到一些麻烦的问题,有问题不要怕解决就好了,前段时间要实现微信h5页面人脸注册/登录,本以为很简单的一个东西,没想到居然这么麻烦,写个文章记录下过程和遇到的问题及解决办法: 需求:①人脸注册 ...
微信公众号：微信H5页面JSAPI充值
微信公众号:微信H5页面JSAPI充值,遇到的一些坑,以及解决方式. 首先说一下微信充值分为很多种:目前我所涉及到的只是APP支付.H5支付.JSAPI支付. 区别: 1.根据不同场景 APP支付:是 ...
vue在微信里面的兼容问题_微信H5页面兼容性问题分析及解决方法
随着H5页面越来越流行,越来越多的开发者都开始用最近H5做微信公众号,在这个过程中自然也会遇到不少的问题.小编在这里整理了五种常见的微信H5页面兼容性问题,来和大家分析一下问题的详情.出现原因以及相对 ...
C#开发微信门户及应用(44)--微信H5页面开发的经验总结
在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...
h5 登录页面_一份写给新手的微信H5页面制作流程介绍
作为一种非常受欢迎的营销推广方式,H5页面具有交互性好.易于传播.感官体验丰富.利于效果追踪等优势.由于H5页面的传播主阵地是微信,所以很多刚接触H5页面的新手经常误以为H5页面只能在微信中传播,也就 ...
微信H5页面嵌入百度地图---解决手机的webKit定位，ios系统对非https网站不提供支持问题
微信H5页面嵌入百度地图---解决手机的webKit定位,ios系统对非https网站不提供支持问题参考文章: (1)微信H5页面嵌入百度地图---解决手机的webKit定位,ios系统对非http ...
堆米微信H5页面怎么制作？易企秀微信H5页面制作，微信简历制作，
现在移动互联网如火如荼,微博过后,微信更是势不可挡.相对于微博的垃圾广告信息泛滥,微信对内容的控制不可谓不严格.当然相对于微博,微信的用户粘性更高,也就是说微信的粉丝价值更高,但是鉴于腾讯对公众号推广 ...
微信h5页面禁止下拉方法
微信h5页面下拉露出网页来源的解决办法:将document的touchmove事件禁止掉 //禁止页面拖动document.addEventListener('touchmove', function ...

微信H5页面调起相册和摄像头，实现图片上传，并上传到本地服务器

微信H5页面调起相册和摄像头，实现图片上传，并上传到本地服务器相关推荐

最新文章

热门文章