html

  1. <!--上传图片-->
  2. <div class="upload-mod">
  3. <div class="up-box" id="upImg">
  4. <img src="__HOME__/images/03-02-01.png " alt="" class="btn_dianji"/>
  5. </div>
  6. </div>

function.php

  1. /**
  2. * 直接生成微信jssdk_config
  3. * @echo string $jssdk Jssdk_config
  4. * @author 5heAtMin9 <sheatming@foxmail.com>
  5. */
  6.  
  7. function wx_jssdk_config($debug='true'){
  8. $getSignPackage = wx_getSignPackage();
  9. $jssdk = '<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>';
  10. $jssdk .= '<script>
  11. wx.config({
  12. debug: '.$debug.',
  13. appId: "'.$getSignPackage['appId'].'",
  14. timestamp: "'.$getSignPackage['timestamp'].'",
  15. nonceStr: "'.$getSignPackage['nonceStr'].'",
  16. signature: "'.$getSignPackage['signature'].'",
  17. 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"],
  18. });
  19. </script>';
  20. echo $jssdk;
  21. }

js  此图片上传功能在华为手机号有点bug  比如我一次上传9张图片,但是只给显示1到2张图片

  1. {:wx_jssdk_config("false")}
  2.  
  3. <script>
  4. var i=0;
  5. var arr_pic = [];
  6. var arr_pic_2 = [];
  7. $('.btn_dianji').click(function(){
  8. if(i<10){
  9. var html = "";
  10. wx.chooseImage({
  11. count: 9-i,
  12. success: function (res) {
  13. var localIds = res.localIds;
  14. syncUpload(localIds);
  15. }
  16. });
  17. var syncUpload = function(localIds){
  18. var localId = localIds.shift();
  19. wx.uploadImage({
  20. localId: localId,
  21. isShowProgressTips: 1,
  22. success: function (res) {
  23. i++;
  24. var serverId = res.serverId; // 返回图片的服务器端ID
  25. arr_pic.push(localId);
  26. arr_pic_2.push(serverId);
  27. //其他对serverId做处理的代码
  28. var $dom = $(html);
  29.  
  30. paixu();
  31. if(localIds.length > 0){
  32. syncUpload(localIds);
  33. }
  34. if(i >=9){
  35. $("#upImg").hide();
  36. $("#upVideo").hide();
  37. }
  38. }
  39. });
  40. };
  41. }
  42. });
  43. /*处理图片上传排序问题*/
  44. function paixu(){
  45. var m = arr_pic.length;
  46. var html = "";
  47. for(var k= m-1 ;k>-1;k--){
  48. 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>';
  49. //m--;
  50. }
  51. var $dom = $(html);
  52. arr_pic = [];
  53. arr_pic_2 = [];
  54. $("#upImg").before($dom);
  55. }
  56. /*图片删除*/
  57. function del_img(dom){
  58. $(dom).parents('.up-box').remove();
  59. i--;
  60. if(i < 9){
  61. $("#upImg").show();
  62. if($("#upPreview").is(":hidden")){
  63. $("#upVideo").show();
  64. }
  65. }
  66. }
  67. /*调用微信预览图片的方法*/
  68. $('.upload-mod').on("click",".up-box .img",function(){
  69. var nowImgurl = $(this).attr("src");
  70. var imgs = [];
  71. var imgObj = $(".up-box .img");//这里改成相应的对象
  72. $.each(imgObj,function(index,el){
  73. imgs.push(imgObj.eq(index).attr("src"));
  74. });
  75. wx.ready(function(){
  76. wx.previewImage({
  77. current: nowImgurl, // 当前显示图片的http链接
  78. urls: imgs // 需要预览的图片http链接列表
  79. });
  80. });
  81. })
  82. </script>

js  第二个方法  上传一张显示一张图片 暂无bug

  1. {:wx_jssdk_config("false")}
  2. <script>
  3. var i=0;
  4. $('#upImg').click(function(){
  5. if(i<10){
  6. var html = '';
  7. wx.chooseImage({
  8. count: 9-i,
  9. success: function (res) {
  10. var localIds = res.localIds;
  11. syncUpload(localIds);
  12. }
  13. });
  14. var syncUpload = function(localIds){
  15. var localId = localIds.shift();
  16. wx.uploadImage({
  17. localId: localId,
  18. isShowProgressTips: 1,
  19. success: function (res) {
  20. i++;
  21. // alert(localIds.length);
  22. var serverId = res.serverId; // 返回图片的服务器端ID
  23. html ='';
  24. 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>';
  25. //其他对serverId做处理的代码
  26. var $dom = $(html);
  27.  
  28. $("#upImg").before($dom);
  29.  
  30. if(localIds.length > 0){
  31. setTimeout(function(){
  32. syncUpload(localIds);
  33. },500);
  34.  
  35. }
  36. if(i > 8){
  37. $("#upImg").hide();
  38. }
  39.  
  40. }
  41. });
  42. };
  43. }
  44. });
  45. </script>
  46. <script>
  47. /*图片删除*/
  48. function del_img(dom){
  49. $(dom).parents('.up-box').remove();
  50. i--;
  51. if(i < 6){
  52. $("#upImg").show();
  53. }
  54. }
  55. /*调用微信预览图片的方法*/
  56. $('.upload-mod').on("click",".up-box .img",function(){
  57. var nowImgurl = $(this).attr("src");
  58. var imgs = [];
  59. var imgObj = $(".up-box .img");//这里改成相应的对象
  60. $.each(imgObj,function(index,el){
  61. imgs.push(imgObj.eq(index).attr("src"));
  62. });
  63. wx.ready(function(){
  64. wx.previewImage({
  65. current: nowImgurl, // 当前显示图片的http链接
  66. urls: imgs // 需要预览的图片http链接列表
  67. });
  68. });
  69. })
  70.  
  71. </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. Mockito-简单使用使用

    参考案例:(本位使用markdown编写) git.oschina实例:https://gitee.com/lhhTestTool/LhhMockito # LhhMockitomock 单元测试 M ...

  2. 【ASP.NET 问题】ASP.NET 网站404页面返回200,或者302的解决办法

    做网站在优化网站时遇到了跳转404页面却返回 200.302状态的问题,这样的话搜索引擎会认为这个页面是一个正常的页面,但是这个页面实际是个错误页面,虽然对访问的用户而言,HTTP状态码是“404”还 ...

  3. 【问题与解决】怎么删除TFS云端上的项目

    最近使用了Visual Stuidio提供的网络项目管理,感觉跟visual stuido结合起来还是很好用的,新建项目很简单,但是在删除项目的时候就没有那么简单了,直接通过VS的团队管理删除还会报错 ...

  4. PyCharm使用Anaconda新建的环境

    首先,创建一个环境用来安装Tensorflow: conda create -n tensorflow python=3.5.6 安装以后,在Anaconda Navigator可以看到已经增加了一个 ...

  5. eureka服务注册发现流程和核心参数

    参数1:eureka.instance.lease-renewal-interval-in-seconds 参数2:eureka.instance.lease-expiration-duration- ...

  6. go微服务框架go-micro深度学习-目录

    go微服务框架go-micro深度学习(一) 整体架构介绍 go微服务框架go-micro深度学习(二) 入门例子 go微服务框架go-micro深度学习(三) Registry服务的注册和发现 go ...

  7. 【转】33 个 2017 年必须了解的 iOS 开源库

    1.IGListKit,作者是Instagram Engineering Instagram 程序员做的,IGListKit 是数据驱动的 UICollectionView 框架,为了构建快速和可扩展 ...

  8. VMWare 虚机迁移后Linux系统网卡启动问题

    重新安装VMWare或拷贝虚机文件后有时网卡会无法工作,主要是因为网卡的Mac地址改变了,如果系统中的网卡配置信息中有Mac的信息,则虚机的系统的网卡可能无法正常工作. 如果出现上述问题,解决办法如下 ...

  9. 电子商务(电销)平台中订单模块(Order)数据库设计明细(转)

    以下是自己在电子商务系统设计中的订单模块的数据库设计经验总结,而今发表出来一起分享,如有不当,欢迎跟帖讨论~ 订单表 (order)|-- 自动编号(order_id, 自增长主键)|-- 订单单号( ...

  10. Golang查缺补漏(一)

    Go语言高级编程(Advanced Go Programming) Go语言高级编程(Advanced Go Programming) golang都是传值,与其他语言不同的是数组作为参数时,也是传值 ...