调用微信上传图片的接口
<div class="boxTitle loadPic"><button id="loadPic">上传图片</button></div>
点击id为loadPic的元素(上传图片按钮)，触发loadPic函数：
function loadPic(e){ if(isWechatBrow()==="wechat"){ /*如果是微信浏览器,就注入微信jssdk*/ wechatJsApi(); //拍照或从手机相册中选图接口 wx.chooseImage({ count:5,//设置一次能选择的图片的数量 sizeType:['original','compressed'],//指定是原图还是压缩,默认二者都有 sourceType:['album','camera'],//可以指定来源是相册还是相机,默认二者都有 success:function(res){ //微信返回了一个资源对象
//res.localIds 是一个数组 保存了用户一次性选择的所有图片的信息 images.localId=res.localIds;//把图片的路径保存在images[localId]中--图片本地的id信息，用于上传图片到微信浏览器时使用 her.upNum+=res.localIds.length; ulLoadToWechat(0); //把这些图片上传到微信服务器 一张一张的上传 } }); }else{ //把上传图片的按钮换成input type=file } };
function wechatJsApi() { //注入微信jssdk conf = getWechatConf('signature'); wx.config({ debug: false, appId: conf.appId, timestamp: conf.timestamp, nonceStr: conf.nonceStr, signature: conf.signature, jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem', 'translateVoice', 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'onVoicePlayEnd', 'pauseVoice', 'stopVoice', 'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu', 'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard', 'chooseCard', 'openCard', 'openAddress' ] }); }
/** * 获取微信配置 */ function getWechatConf(e) { $.ajax({ type: "POST", url: "/wechat/getConf/", data: { getVal: e, url: window.location.href }, dataType: "json", async: false, success: function (d) { if (d.state) { ii = d.data.signature; } else { ii = d.msg; } }, error: function (jqXHR) { ii = false; alert("发生错误,请咨询公众平台客服"); } }); return ii; }
//上传图片到微信 function ulLoadToWechat(i){ length = images.localId.length; //本次要上传所有图片的数量 wx.uploadImage({ localId: images.localId[i], //图片在本地的id success: function (res) {//上传图片到微信成功的回调函数 会返回一个媒体对象 存储了图片在微信的id images.serverId.push(res.serverId);
her.pic = wxImgDown(res.serverId);
//上传成功后 后台立马把图片从微信服务器上下载下来，返回图片在本地服务器上的信息
（具体内容和后台协调：这里返回的信息有图片的url和图片在本地服务器中的id）
her.iid.push(her.pic.id); //把图片在本地服务器中的id专门保存到一个数组当中 her.sum++; if (her.sum <= 5) { // creatImg(her.pic.thumdfile);//缩略图 creatImg(her.pic.newpath,her.pic.id);//原图 创建img便签 将用户选择的图片显示在页面中 } else { alert('最多只能选择5张图片'); } i++; if (i < length) { ulLoadToWechat(i); } }, fail: function (res) { alert(JSON.stringify(res)); } }); };
//下载上传到微信上的图片 function wxImgDown(sid){ $.ajax({ //后台下载 type:"POST", url:"/wechat/wxImgDown", data:{ sid:sid }, dataType:"json", async: false, success:function(rel){ if(rel.state){ //alert(rel.data);//获得图片信息 // alert(rel.data.id);//图片在服务器上的id // alert(rel.data.thumdfile);//图片在服务器上的 her.arrPic=rel.data;//是个数组 // iid=rel.data.id; }else{ her.arrPic.thumdfile=false; alert('上传图片错误'); } }, erro:function(jqXHR){ alert(jqXHR); } }).done(function(arrPic){ return her.arrPic; }); return her.arrPic; //返回一个数组 保存图片在本地服务器中的信息（url，id） }
//创建img的方法 function creatImg(path,id) { if (her.sum <= 5) { var imgdiv= document.createElement('div'); imgdiv.className="imgParent"; var img = document.createElement('img'); img.className += "ppp"; $(img).attr('data-id',id);//给每个img添加一个data-id属性,值为该图片在数据库中的id img.src = path; //创建 删除小按钮 定位在了每张图片的左上角 var delPicA=document.createElement('a'); delPicA.innerHTML='X'; delPicA.className="delPicAC"; $(delPicA).attr('data-id',id); $(imgdiv).append(delPicA); $(imgdiv).append(img); $('.picPreview').append(imgdiv); } else { alert('最多只能选择5张图片'); } her.srcArr.push(path); }
用户选择好图片后，显示在页面中，下一步就是：点击图片进行预览
//用户选好图片后,点击图片进行预览 $('.picPreview').on('click','img', function () { //调用预览图片的接口 wx.previewImage({ current: this.src,//当前显示图片的http连接 urls: her.srcArr//需要预览图片的http连接列表 }); });
或点击图片上的小叉号删除已选择的图片（小叉号html中自己写），是一个a便签，有自定义属性保存了图片的id
//用户点击X 删除图片 $('.picPreview').on('click','a', function () { var id = $(this).attr('data-id');//每张图片上都有一个自定义属性保存了图片在后台中的id if (confirm("确定删除这张图片吗?")) { //删除要传后台中img的id 的数组中的数据 for (var i = 0; i < her.iid.length; i++) { if (her.iid[i] == id) { her.iid.splice(i, 1); } } //删除预览 $(this).parent().remove(); } });
最后的确定按钮，把图片发表出去的功能
//确定发表提问 获得用户发表的内容 function publishAsk(){ var title=$('#ua-title').val(); var question=$('#ua-question').val(); var uimg=[]; var eid=$('#eid').attr('data-id'); for(var i=0;i<her.iid.length;i++){ uimg.push(her.iid[i]); //只用向后台传图片在本地服务器上的id } function sc(){ $.ajax({ type:"POST", url:"/expert/require", data:{ title:title, question:question, img:uimg, eid:eid }, dataType:"json", async: false, success: function (data) { if(data.state){ $('.askEBox').css('display','none'); alert("恭喜你,发表成功"); history.go(0); } }, erro:function (){ alert('发表失败,请联系管理员'); } }); } if((title=="") || (question=="")){ alert('问题主题和问题描述必须填写!'); }else{ if(her.iid.length==0){ if(confirm('上传图片有助于行家更好的解决你的问题~')){ return; }else{ sc(); } }else{//已经选择了图片 sc(); } } };
