微信jssdk上传图片,一张一张的上传 和 一次性传好几张
- //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);
- }
微信jssdk上传图片,一张一张的上传 和 一次性传好几张的更多相关文章
- 微信JS-SDK 选取手机照片并进行上传
项目中遇到需要选取照片上传的需求,因为网页运行在微信的浏览器里面,所以用微信的 js-sdk 提供的选取照片功能,来进行项目开发.实际开发中需要用到微信web开发者工具,详细参考链接:https:// ...
- 微信JS-SDK选择相册或拍照并上传PHP实现
理解:微信上传接口是拍照,或者选择本地照片,上传到微信的服务器,获取到一个id,通过token与这个id获取到图片,保存到服务器即可. 效果 通过微信js接口,调用底层程序. 需要引入js文件,并进行 ...
- 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比
在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...
- 【原创】.Net 微信 JS-SDK图片、语音上传接口的实现(MVC)-(一 、上传图片)
前段时间在做一个微信的项目,遇到了一个上传图片的问题,花了一下午,解决了这个问题,然后把总结出来的代码,分享了出来. 最近又有一个图片+语音的功能, 更是蛋疼, 本次采用的不是File文件上传,然后转 ...
- 微信JSSDK上传多张图片
之前是使用for循环实现的,但是安卓手机没有问题,苹果手机只能上传最后一张图片. 好在有高手在前面趟路,实用的循环调用.苹果是没有,安卓不清楚.以下内容转自:http://leo108.com/pid ...
- 微信JS-SDK实现上传图片功能
最近在项目开发中,有一个在微信WEB项目中上传图片的需求,一开始使用了传统的<input type="file">的方式去实现,但是后面发现在使用这种传统模式时会由于手 ...
- 微信JS-SDK接口 + FLASK实现图片上传
最近在做一个项目从全球各地采集图片,考虑采用微信JS-SDK来简化开发.图片会首先上传到微信的服务器,返回一个id,然后根据这个id去微信服务器获取图片.微信提供可选择的压缩图片功能.图片首先上传到微 ...
- 调用微信JS-SDK接口上传图片
最近要在微信上做个问卷调查,有个上传图片功能,折腾找了半天资料,都不好弄,最终打算调用微信提供的上传图片接口,实现上传图片功能!此功能最大的好处是可以在微信服务器上暂存图片,减少本地服务器图片的缓存, ...
- 使用微信JSSDK实现图片上传
近期做的一个项目,刚好用到了JSSDK,把用到的东西整理下. 先附上微信开发人员文档链接:微信开发人员文档 主要用到了: 引入JS文件 在须要调用JS接口的页面引入例如以下JS文件.(支持https) ...
随机推荐
- Linux 安装 yum
1.使用RedHat系统不能正常使用yum安装 由于RedHat没有注册,所有不能使用它自身的资源更新, 查看安装源是否安装: # rpm –qa|grep yum 卸载安装源: # rpm –e – ...
- WIN8 Metro UI 风格下的微软报表开发与设计 Metro UI SSRS - BIWORK
开篇介绍 作为 BI 系统前端展现的报表,其重要性不言而喻,我们对于一个好的报表的要求也无非主要包含以下几点: 1. 数据完整和正确,数据质量没有问题 2. 友好的清晰的界面,整洁美观,有得体的格式 ...
- 基于Python项目的Redis缓存消耗内存数据简单分析(附详细操作步骤)
目录 1 准备工作 2 具体实施 1 准备工作 什么是Redis? Redis:一个高性能的key-value数据库.支持数据的持久化,可以将内存中的数据保存在磁盘中,重启的时候可以再次加载进行使 ...
- Android——TabHost(标签容器)相关知识总结贴
android 2.3 r1 中文 api (58) —— TabHost http://www.apkbus.com/android-18911-1-1.html android中文api (5 ...
- 公司Docker环境配置
1.安装最新的docker:$ curl -fsSL get.docker.com -o get-docker.sh$ sudo sh get-docker.sh 2.安装docker-compose ...
- appium 后台运行shell脚本
appium 在后台运行,把启动appium命令保存为一个shell文件,文件名包含appium,如start_appium.sh.由于启动前要杀掉已经启动的appium服务, BUILD_ID=do ...
- [svc]glusterfs的简单部署
服务端安装 gluster01主机挂载磁盘 [root@glusterfs01 ~]# mkfs.xfs /dev/sdb [root@glusterfs01 ~]# mkdir -p /data/b ...
- 不同局域网中同一IP地址的计算机怎么通信的
1.IP地址在192.--.255之内的是私有地址,即192.168.1.56的电脑a是不能直接与192.168.1.56的电脑b进行通信的.他们需要用到NAT技术,即网络地址转换.2.NAT的作用是 ...
- lua -- 物品的配置文件,表的形式保存
do local goodsprop= { RECORDS={ []={ BuyGold= , RecoverPrice= , Value= , Param2= , UseTimesPerDay= , ...
- (转-经典-数据段)C++回顾之static用法总结、对象的存储,作用域与生存期
转自:https://blog.csdn.net/ab198604/article/details/19158697相关知识补充:https://www.cnblogs.com/rednodel/p/ ...