微信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) ...
 
随机推荐
- CentOS 7不能进入图形界面
			
开机后发现CentOS 7不能进入图形界面,进入终端模式后运行startx命令也报错,不知道什么原因,后来运行了yum upgrade命令,升级以后就可以进入图形界面了,同时也升级了.
 - 基于Python的datetime模块和time模块源码阅读分析
			
目录 1 前言 2 datetime.pyi源码分步解析 2.1 头部定义源码分析 2.2 tzinfo类源码分析 2.3 date类源码分析 2.4 time类源码分析 2.5 timedelta ...
 - 使用vue.js路由踩到的一个坑Unknown custom element
			
在配合require.js使用vue路由的时候,遇到了路由组件报错: “vue.js:597 [Vue warn]: Unknown custom element: <router-link&g ...
 - 基于Ubuntu部署 memcached 服务
			
系统要求:Ubuntu 16.04.1 LTS 64 位操作系统 安装并启动 memcached 服务 安装 memcached 使用apt-get安装 memcached sudo apt-get ...
 - [Aaronyang] 写给自己的WPF4.5 笔记17[Page实现页面导航]
			
1. 第一个Page页使用 新建PageDemo解决方案,默认wpf应用程序 右键项目新建页,然后指定App.xaml的默认启动窗口,为Page1.xaml,F5运行项目 文章内容已经迁移http:/ ...
 - 使用ExpandableListView以及如何优化view的显示减少内存占用
			
上篇博客讲到如何获取手机中所有歌曲的信息.本文就把上篇获取到的歌曲按照歌手名字分类.用一个ExpandableListView显示出来. MainActivity .java public cla ...
 - Docker 以 docker 方式运行 jenkins
			
https://testerhome.com/topics/5798 Docker 以 docker 方式运行 jenkins jmcn · 2016年08月26日 · 最后由 blueshark 回 ...
 - [ci] jenkins kubernetes插件配置(容器模式)-通过jnlp
			
有个小伙用sh结合jenkins搞的k8s cicd还不错 jenkins kubernetes插件 首先插件管理,搜索kubernetes plugin安装 配置kubernetes云 配置项目 执 ...
 - pandas DataFrame(3)-轴
			
和numpy数组(5)-二维数组的轴一样,pandas DataFrame也有轴的概念,决定了方法是对行应用还是对列应用: 以下面这个数据为例说明: 这个数据是5个车站10天内的客流数据: rider ...
 - Core dump去哪里了?
			
转自:http://blog.csdn.net/normallife/article/details/53818997 今天程序Crash,去追踪,找core dump,始终没有找到,后来到了/pro ...