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>

微信sdk 图片上传 两种方法 上传一张显示一张 并附带微信图片放大功能和删除功能的更多相关文章

  1. 两种方法上传本地文件到github

    https://www.jianshu.com/p/c70ca3a02087 自从使用github以来,一直都是在github网站在线上传文件到仓库中,但是有时因为网络或者电脑的原因上传失败.最重要的 ...

  2. 两种方法上传本地文件到github(转)

    自从使用github以来,一直都是在github网站在线上传文件到仓库中,但是有时因为网络或者电脑的原因上传失败.最重要的原因是我习惯本地编辑,完成以后再一起上传github.看过了几个教程,总结出最 ...

  3. 两种方法将oracle数据库中的一张表的数据导入到另外一个oracle数据库中

    oracle数据库实现一张表的数据导入到另外一个数据库的表中的方法有很多,在这介绍两个. 第一种,把oracle查询的数据导出为sql文件,执行sql文件里的insert语句,如下: 第一步,导出sq ...

  4. MFC上显示摄像头JPEG图片数据的两种方法

    其一是借助opencv,其二是利用流对象. 方法一: CvMat *mat; ,,CV_8UC1); ,,CV_8UC1,JPEGBuf); /*初始化矩阵信息头,这里的JPEGBuf就是JPEG图像 ...

  5. QT 实现图片旋转的两种方法

    第一种方案 使用 QPixmap 的 transformed 函数来实现旋转,这个函数默认是以图片中心为旋转点,不能设置旋转的中心点,使用如下: QMatrix matrix; matrix.rota ...

  6. 窗体图片背景(两种方法:设置Brush.Bitmap指向图片,别的控件也可以这样)

    var   Bitmap: TBitmap; procedure TForm1.FormCreate(Sender: TObject); begin   Bitmap := TBitmap.Creat ...

  7. 【Qt】实现程序重启的两种方法

    Qt5/PyQt5 实现程序重启的两种方法 前言 最近在写一个开源项目,需要实现一个程序自动重启的功能.尝试了好几种方式,效果均不太理想. 一开始的实现思路是,记为思路一吧.大概就是写一些 shell ...

  8. WCF生成客户端代理对象的两种方法的解释

    最近在封装WCF,有一些很好的实践就记录下来,大家可以放心使用,所有代码都已经调试过.如果有高手可以大家探讨一下. 在WCF中有两种不同的方法可以用于创建客户端服务对象,他们分别为: 1. 代理构造法 ...

  9. GitHub常用上传文件的两种方法 附带常见的问题及Git安装教程

    从早上下课到现在一直在琢磨如何给Github下载本地文件,中午饭都没吃.还好是解决了,感觉挺有成就感的.O(∩_∩)O哈哈~ 好哒 闲话不说,说重点. 一.git的安装 百度云:http://pan. ...

随机推荐

  1. centos cron 自动执行脚本异常 命令不生效的解决办法

    办法: 1.sh脚本加入 source /etc/profile 2.非系统命令,要写绝对路径

  2. DENIED Redis is running in protected mode

    1.开源软件往往做的非常出色,错误的时候,会告诉你原因,以及怎么修改,仔细阅读就能明白.比如这个错误: [root@localhost src]# ./redis-cli -h 172.16.2.16 ...

  3. UITextField 基本设置

    _myAccount = [[UITextField alloc]init]; _myAccount.frame = CGRectMake(, , , ); _myAccount.background ...

  4. 类中添加log4j日志

    在编写代码的时候需要随时查看工作日志,查看工作日志的好处就是随时能检查出错误.所以我一般就需要在编写代码的前期添加工作日志,以便更好的查看相关错误输出. 以一个springmvc小demo为例子  主 ...

  5. jquery核心

    1.找到所有 p 元素,并且这些元素都必须是 div 元素的子元素 $("div > p"); 2.设置页面背景色 $(document.body).css("ba ...

  6. 【Apache】Apache的安装和配置

    Apache是世界非常流行的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一. Apache在Win7上的安装 下载apa ...

  7. Nload(CentOS网速的实时监控)

    Nload(CentOS网速的实时监控)的安装和安装过程中的问题 I. 安装 Download the latest rpmforge-release rpm from wget ftp://ftp. ...

  8. 开源Web自动化测试工具Selenium IDE

    Selenium IDE(也有简写SIDE的)是一款开源的Web自动化测试工具,它实现了测试用例的录制与回放. Selenium IDE目前版本为 3.6 系列,支持跨浏览器运行,所以IDE的UI从原 ...

  9. [mvc] 简单的forms认证

    1.在web.config的system.web节点增加authentication节点,定义如下: <system.web> <compilation debug="tr ...

  10. go语言关键字图示

    Go语言一共有25个关键字,除了select,上文基本上已经一网打尽了.为了加深印象,我们用一张结构图来说明一下: 这张图如果看不清的话,我们将其拆成两张图,再注掉分支流程那部分的局部图: 分支流程部 ...