---恢复内容开始---
<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();
}
}
};