<form method="post" action="{:url('feed_back/set_my_feedback')}">
<div class="pic">
<div class="uploadImage" onclick="chooseImage()"></div>
</div>
<button class="opinion_btn">提交反馈</button>
</form>
<script>
var wurl = window.location.href;
var wx_share = function () {
var url = wurl;
$.ajax({
url: "xxxxxxx",
type: "post",
data: { "index_url": url },
success: function (res) {
if (res.code == 200) {
var data = res.data.config;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appId, // 必填,企业号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature,// 必填,签名,见附录1
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'chooseImage',
'uploadImage',
'downloadImage'
]
});
}
},
error: function (res) { }
});
};
wx_share();
// 解决上传多张图片时serverId重复,使用递归解决
// 使用递归会导致重复追加,所以追加的时候不能使用+=,使用=
var htmlPhoto="";
var localIds;
function chooseImage () {
wx.chooseImage({
count: 9,
sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
defaultCameraMode: "normal",
success: function (res) {
localIds = res.localIds; //获取图片的临时路径
htmlPhoto="";
updateBase64Data();
},
fail: function (res) {
alert('选择图片失败:' + res.errMsg);
},
});
}
function updateBase64Data() {
if (!localIds.length) {
console.log('上传成功!');
} else {
var localId = localIds.pop();
wx.uploadImage({
localId: localId,
success: function(res) {
var serverId = res.serverId; // 返回图片的服务器端ID
htmlPhoto ='<div class="imgdiv"><img class="del_img" src="/static/theme/img/camp/del_img.png"/><img src='+ localId+' /><input type="hidden" name="serverId[]" value='+serverId+' /></div>';
$(".uploadImage").before(htmlPhoto);
updateBase64Data(); //如果还有图片就继续追加
}
});
}
}
$(document).on("mouseup",".del_img",function(){
$(this).parent().remove()
})
</script>
点击提交时将每个图片的serverId 传到后台,让后台去微信的素材库下载、处理。
网友评论