html
<!--上传图片-->
<div class="upload-mod">
<div class="up-box" id="upImg">
<img src="__HOME__/images/03-02-01.png " alt="" class="btn_dianji"/>
</div>
</div>
function.php
/**
* 直接生成微信jssdk_config
* @echo string $jssdk Jssdk_config
* @author 5heAtMin9 <sheatming@foxmail.com>
*/ function wx_jssdk_config($debug='true'){
$getSignPackage = wx_getSignPackage();
$jssdk = '<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>';
$jssdk .= '<script>
wx.config({
debug: '.$debug.',
appId: "'.$getSignPackage['appId'].'",
timestamp: "'.$getSignPackage['timestamp'].'",
nonceStr: "'.$getSignPackage['nonceStr'].'",
signature: "'.$getSignPackage['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"],
});
</script>';
echo $jssdk;
}
js 此图片上传功能在华为手机号有点bug 比如我一次上传9张图片，但是只给显示1到2张图片
{:wx_jssdk_config("false")}
<script>
var i=0;
var arr_pic = [];
var arr_pic_2 = [];
$('.btn_dianji').click(function(){
if(i<10){
var html = "";
wx.chooseImage({
count: 9-i,
success: function (res) {
var localIds = res.localIds;
syncUpload(localIds);
}
});
var syncUpload = function(localIds){
var localId = localIds.shift();
wx.uploadImage({
localId: localId,
isShowProgressTips: 1,
success: function (res) {
i++;
var serverId = res.serverId; // 返回图片的服务器端ID
arr_pic.push(localId);
arr_pic_2.push(serverId);
//其他对serverId做处理的代码
var $dom = $(html);
paixu();
if(localIds.length > 0){
syncUpload(localIds);
}
if(i >=9){
$("#upImg").hide();
$("#upVideo").hide();
}
}
});
};
}
});
/*处理图片上传排序问题*/
function paixu(){
var m = arr_pic.length;
var html = "";
for(var k= m-1 ;k>-1;k--){
html += '<div class="up-box " ><img src="'+arr_pic[k]+'" class="img"/><div class="close"><img src="__HOME__/images/close.png" onclick="del_img(this)"> </div><input type="hidden" name="image[]" value="'+arr_pic_2[k]+'"></div>';
//m--;
}
var $dom = $(html);
arr_pic = [];
arr_pic_2 = [];
$("#upImg").before($dom);
}
/*图片删除*/
function del_img(dom){
$(dom).parents('.up-box').remove();
i--;
if(i < 9){
$("#upImg").show();
if($("#upPreview").is(":hidden")){
$("#upVideo").show();
}
}
}
/*调用微信预览图片的方法*/
$('.upload-mod').on("click",".up-box .img",function(){
var nowImgurl = $(this).attr("src");
var imgs = [];
var imgObj = $(".up-box .img");//这里改成相应的对象
$.each(imgObj,function(index,el){
imgs.push(imgObj.eq(index).attr("src"));
});
wx.ready(function(){
wx.previewImage({
current: nowImgurl, // 当前显示图片的http链接
urls: imgs // 需要预览的图片http链接列表
});
});
})
</script>
js 第二个方法 上传一张显示一张图片 暂无bug
{:wx_jssdk_config("false")}
<script>
var i=0;
$('#upImg').click(function(){
if(i<10){
var html = '';
wx.chooseImage({
count: 9-i,
success: function (res) {
var localIds = res.localIds;
syncUpload(localIds);
}
});
var syncUpload = function(localIds){
var localId = localIds.shift();
wx.uploadImage({
localId: localId,
isShowProgressTips: 1,
success: function (res) {
i++;
// alert(localIds.length);
var serverId = res.serverId; // 返回图片的服务器端ID
html ='';
html += '<div class="up-box " ><img src="'+localId+'" class="img"/><div class="close"><img src="__HOME__/images/close.png" onclick="del_img(this)"> </div><input type="hidden" name="image[]" value="'+serverId+'"></div>';
//其他对serverId做处理的代码
var $dom = $(html);
$("#upImg").before($dom);
if(localIds.length > 0){
setTimeout(function(){
syncUpload(localIds);
},500);
}
if(i > 8){
$("#upImg").hide();
}
}
});
};
}
});
</script>
<script>
/*图片删除*/
function del_img(dom){
$(dom).parents('.up-box').remove();
i--;
if(i < 6){
$("#upImg").show();
}
}
/*调用微信预览图片的方法*/
$('.upload-mod').on("click",".up-box .img",function(){
var nowImgurl = $(this).attr("src");
var imgs = [];
var imgObj = $(".up-box .img");//这里改成相应的对象
$.each(imgObj,function(index,el){
imgs.push(imgObj.eq(index).attr("src"));
});
wx.ready(function(){
wx.previewImage({
current: nowImgurl, // 当前显示图片的http链接
urls: imgs // 需要预览的图片http链接列表
});
});
})
</script>