1. //html模板
  2.  
  3. <div class="zhaopin_3_2">
  4. <div id="bbb"></div>
  5. <img src="/Public/Home/images/jia.png" class="avatar-round1">
  6. </div>

此方法是一次可多张上传

  1. //js控制
  2.  
  3. {:wx_jssdk_config("false")}
  4. <script>
  5. var headimgurl;
  6. var y=0;
  7. var i =0;
  8. $('.avatar-round1').click(function(){
  9. if(y<5){
  10. var html = $('#bbb').html();
  11. wx.chooseImage({
  12. count: 5-i,
  13. success: function (res) {
  14. var localIds = res.localIds;
  15. syncUpload(localIds);
  16. }
  17. });
  18.  
  19. var syncUpload = function(localIds){
  20. var localId = localIds.pop();
  21. wx.uploadImage({
  22. localId: localId,
  23. isShowProgressTips: 1,
  24. success: function (res) {
  25. i++;
  26. var serverId = res.serverId; // 返回图片的服务器端ID
  27. html += '<div class="uploadImg img"><div class="close"><img src="__HOME__/images/close.png" onclick="del_imgy(this);"> </div>'+
  28. '<img src="'+localId+'"/><input type="hidden" name="image[]" value="'+serverId+'"></div>';
  29. //其他对serverId做处理的代码
  30. if(localIds.length > 0){
  31. syncUpload(localIds);
  32. }else{
  33. $('#bbb').html(html);
  34. }
  35. }
  36. });
  37. };
  38. }
  39. });
  40.  
  41. function del_img(dom){
  42. $(dom).parents('.uploadImg').remove();
  43. }
  44. </script>

//此方法可一张一张的上传

  1. {:wx_jssdk_config("false")}
  2. <script>
  3. var headimgurl;
  4. $('.avatar-round1').click(function(){
  5. wx.chooseImage({
  6. count: 1, // 默认9
  7. sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  8. sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  9. success: function(res) {
  10. var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
  11. // 上传照片
  12. wx.uploadImage({
  13. localId: '' + localIds,
  14. isShowProgressTips: 1,
  15. success: function(res) {
  16. serverId = res.serverId;
  17. $(localIds).each(function(index, el) {
  18. iii=localIds[index];
  19.  
  20. });
  21. var html = $('#bbb').html();
  22. html += '<div class="uploadImg img" id="tuji"><div class="close"><img src="__HOME__/images/close.png" onclick="del_img(this);"> </div>'+
  23. '<img src="'+iii+'"><input type="hidden" name="image[]" value="'+serverId+'"></div>';
  24. $('#bbb').html(html);
  25. }
  26. });
  27. }
  28. });
  29. });
  30.  
  31. function del_img(dom){
  32.  
  33. $(dom).parents('.uploadImg').remove();
  34.  
  35. }
  36. </script>

下面使用的方法都是一样的

  1. //封装的方法
  2. //我的是放在 function.php文件里
  3.  
  4. //下面这两个方法需要用到微信的配置
  5.  
  6. /**
  7. * 直接生成微信jssdk_config
  8. * @echo string $jssdk Jssdk_config
  9. * @author 5heAtMin9 <sheatming@foxmail.com>
  10. */
  11.  
  12. function wx_jssdk_config($debug='true'){
  13. $getSignPackage = wx_getSignPackage();
  14. $jssdk = '<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>';
  15. $jssdk .= '<script>
  16. wx.config({
  17. debug: '.$debug.',
  18. appId: "'.$getSignPackage['appId'].'",
  19. timestamp: "'.$getSignPackage['timestamp'].'",
  20. nonceStr: "'.$getSignPackage['nonceStr'].'",
  21. signature: "'.$getSignPackage['signature'].'",
  22. 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"],
  23. });
  24. </script>';
  25. echo $jssdk;
  26. }
  27.  
  28. //控制器里需要用到此方法
  29. /**
  30. * 保存图片、视频、语音消息
  31. * @param string $media_id 素材ID
  32. * @param string $save_path 保存路径
  33. * @return string $return 返回jpg文件路径
  34. * @author 5heAtMin9 <sheatming@foxmail.com>
  35. */
  36.  
  37. function wx_msg_save_file($media_id, $msgtype, $save_path='./Uploads/Wechat/')
  38. {
  39. switch($msgtype){
  40. case 'image':
  41. $save_path .= 'image/';
  42. $ex = '.jpg';
  43. break;
  44. case 'video':
  45. $save_path .= 'video/';
  46. $ex = '.mp4';
  47. break;
  48. case 'voice':
  49. $save_path .= 'voice/';
  50. $ex = '.amr';
  51. break;
  52. default : return '参数错误'; break;
  53. }
  54.  
  55. if(!is_dir($save_path)){
  56. mkdir($save_path);
  57. }
  58. $url = 'http://file.api.weixin.qq.com/cgi-bin/media/get?access_token='.wx_get_access_token() -> access_token.'&media_id='.$media_id;
  59. $filename = $msgtype."_".rand(1111,9999).time().$ex;
  60. downAndSaveFile($url,$save_path.$filename);
  61. $ready_upload = $save_path.$filename;// 文件在本地的位置
  62. return $ready_upload;
  63. }
  1. //在控制器里需要这样用
  2.  
  3. if(I('image')!=''){
  4. foreach(I('image') as $k=>$v){
  5. $aa[$k]=wx_msg_save_file($v, 'image');
  6. }
  7. $_POST['picture']=implode(',',$aa);
  8. }

微信jssdk上传图片,一张一张的上传 和 一次性传好几张的更多相关文章

  1. 微信JS-SDK 选取手机照片并进行上传

    项目中遇到需要选取照片上传的需求,因为网页运行在微信的浏览器里面,所以用微信的 js-sdk 提供的选取照片功能,来进行项目开发.实际开发中需要用到微信web开发者工具,详细参考链接:https:// ...

  2. 微信JS-SDK选择相册或拍照并上传PHP实现

    理解:微信上传接口是拍照,或者选择本地照片,上传到微信的服务器,获取到一个id,通过token与这个id获取到图片,保存到服务器即可. 效果 通过微信js接口,调用底层程序. 需要引入js文件,并进行 ...

  3. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

  4. 【原创】.Net 微信 JS-SDK图片、语音上传接口的实现(MVC)-(一 、上传图片)

    前段时间在做一个微信的项目,遇到了一个上传图片的问题,花了一下午,解决了这个问题,然后把总结出来的代码,分享了出来. 最近又有一个图片+语音的功能, 更是蛋疼, 本次采用的不是File文件上传,然后转 ...

  5. 微信JSSDK上传多张图片

    之前是使用for循环实现的,但是安卓手机没有问题,苹果手机只能上传最后一张图片. 好在有高手在前面趟路,实用的循环调用.苹果是没有,安卓不清楚.以下内容转自:http://leo108.com/pid ...

  6. 微信JS-SDK实现上传图片功能

    最近在项目开发中,有一个在微信WEB项目中上传图片的需求,一开始使用了传统的<input type="file">的方式去实现,但是后面发现在使用这种传统模式时会由于手 ...

  7. 微信JS-SDK接口 + FLASK实现图片上传

    最近在做一个项目从全球各地采集图片,考虑采用微信JS-SDK来简化开发.图片会首先上传到微信的服务器,返回一个id,然后根据这个id去微信服务器获取图片.微信提供可选择的压缩图片功能.图片首先上传到微 ...

  8. 调用微信JS-SDK接口上传图片

    最近要在微信上做个问卷调查,有个上传图片功能,折腾找了半天资料,都不好弄,最终打算调用微信提供的上传图片接口,实现上传图片功能!此功能最大的好处是可以在微信服务器上暂存图片,减少本地服务器图片的缓存, ...

  9. 使用微信JSSDK实现图片上传

    近期做的一个项目,刚好用到了JSSDK,把用到的东西整理下. 先附上微信开发人员文档链接:微信开发人员文档 主要用到了: 引入JS文件 在须要调用JS接口的页面引入例如以下JS文件.(支持https) ...

随机推荐

  1. Linux 安装 yum

    1.使用RedHat系统不能正常使用yum安装 由于RedHat没有注册,所有不能使用它自身的资源更新, 查看安装源是否安装: # rpm –qa|grep yum 卸载安装源: # rpm –e – ...

  2. WIN8 Metro UI 风格下的微软报表开发与设计 Metro UI SSRS - BIWORK

    开篇介绍 作为 BI 系统前端展现的报表,其重要性不言而喻,我们对于一个好的报表的要求也无非主要包含以下几点: 1. 数据完整和正确,数据质量没有问题 2. 友好的清晰的界面,整洁美观,有得体的格式 ...

  3. 基于Python项目的Redis缓存消耗内存数据简单分析(附详细操作步骤)

    目录 1 准备工作 2 具体实施   1 准备工作 什么是Redis? Redis:一个高性能的key-value数据库.支持数据的持久化,可以将内存中的数据保存在磁盘中,重启的时候可以再次加载进行使 ...

  4. Android——TabHost(标签容器)相关知识总结贴

    android 2.3 r1 中文 api (58) —— TabHost http://www.apkbus.com/android-18911-1-1.html   android中文api (5 ...

  5. 公司Docker环境配置

    1.安装最新的docker:$ curl -fsSL get.docker.com -o get-docker.sh$ sudo sh get-docker.sh 2.安装docker-compose ...

  6. appium 后台运行shell脚本

    appium 在后台运行,把启动appium命令保存为一个shell文件,文件名包含appium,如start_appium.sh.由于启动前要杀掉已经启动的appium服务, BUILD_ID=do ...

  7. [svc]glusterfs的简单部署

    服务端安装 gluster01主机挂载磁盘 [root@glusterfs01 ~]# mkfs.xfs /dev/sdb [root@glusterfs01 ~]# mkdir -p /data/b ...

  8. 不同局域网中同一IP地址的计算机怎么通信的

    1.IP地址在192.--.255之内的是私有地址,即192.168.1.56的电脑a是不能直接与192.168.1.56的电脑b进行通信的.他们需要用到NAT技术,即网络地址转换.2.NAT的作用是 ...

  9. lua -- 物品的配置文件,表的形式保存

    do local goodsprop= { RECORDS={ []={ BuyGold= , RecoverPrice= , Value= , Param2= , UseTimesPerDay= , ...

  10. (转-经典-数据段)C++回顾之static用法总结、对象的存储,作用域与生存期

    转自:https://blog.csdn.net/ab198604/article/details/19158697相关知识补充:https://www.cnblogs.com/rednodel/p/ ...