//html模板 <div class="zhaopin_3_2"> <div id="bbb"></div> <img src="/Public/Home/images/jia.png" class="avatar-round1"> </div>
此方法是一次可多张上传
//js控制 {:wx_jssdk_config("false")} <script> var headimgurl; var y=0; var i =0; $(‘.avatar-round1‘).click(function(){ if(y<5){ var html = $(‘#bbb‘).html(); wx.chooseImage({ count: 5-i, success: function (res) { var localIds = res.localIds; syncUpload(localIds); } }); var syncUpload = function(localIds){ var localId = localIds.pop(); wx.uploadImage({ localId: localId, isShowProgressTips: 1, success: function (res) { i++; var serverId = res.serverId; // 返回图片的服务器端ID html += ‘<div class="uploadImg img"><div class="close"><img src="__HOME__/images/close.png" onclick="del_imgy(this);"> </div>‘+ ‘<img src="‘+localId+‘"/><input type="hidden" name="image[]" value="‘+serverId+‘"></div>‘; //其他对serverId做处理的代码 if(localIds.length > 0){ syncUpload(localIds); }else{ $(‘#bbb‘).html(html); } } }); }; } }); function del_img(dom){ $(dom).parents(‘.uploadImg‘).remove(); } </script>
//此方法可一张一张的上传
{:wx_jssdk_config("false")} <script> var headimgurl; $(‘.avatar-round1‘).click(function(){ wx.chooseImage({ count: 1, // 默认9 sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有 sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机,默认二者都有 success: function(res) { var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片 // 上传照片 wx.uploadImage({ localId: ‘‘ + localIds, isShowProgressTips: 1, success: function(res) { serverId = res.serverId; $(localIds).each(function(index, el) { iii=localIds[index]; }); var html = $(‘#bbb‘).html(); html += ‘<div class="uploadImg img" id="tuji"><div class="close"><img src="__HOME__/images/close.png" onclick="del_img(this);"> </div>‘+ ‘<img src="‘+iii+‘"><input type="hidden" name="image[]" value="‘+serverId+‘"></div>‘; $(‘#bbb‘).html(html); } }); } }); }); function del_img(dom){ $(dom).parents(‘.uploadImg‘).remove(); } </script>
下面使用的方法都是一样的
//封装的方法 //我的是放在 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.0.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; } //控制器里需要用到此方法
/** * 保存图片、视频、语音消息 * @param string $media_id 素材ID * @param string $save_path 保存路径 * @return string $return 返回jpg文件路径 * @author 5heAtMin9 <sheatming@foxmail.com> */ function wx_msg_save_file($media_id, $msgtype, $save_path=‘./Uploads/Wechat/‘) { switch($msgtype){ case ‘image‘: $save_path .= ‘image/‘; $ex = ‘.jpg‘; break; case ‘video‘: $save_path .= ‘video/‘; $ex = ‘.mp4‘; break; case ‘voice‘: $save_path .= ‘voice/‘; $ex = ‘.amr‘; break; default : return ‘参数错误‘; break; } if(!is_dir($save_path)){ mkdir($save_path); } $url = ‘http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=‘.wx_get_access_token() -> access_token.‘&media_id=‘.$media_id; $filename = $msgtype."_".rand(1111,9999).time().$ex; downAndSaveFile($url,$save_path.$filename); $ready_upload = $save_path.$filename;// 文件在本地的位置 return $ready_upload; }
//在控制器里需要这样用 if(I(‘image‘)!=‘‘){ foreach(I(‘image‘) as $k=>$v){ $aa[$k]=wx_msg_save_file($v, ‘image‘); } $_POST[‘picture‘]=implode(‘,‘,$aa); }