//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上传图片,一张一张的上传 和 一次性传好几张的更多相关文章

  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. 浅谈压缩感知(二十二):压缩感知重构算法之正则化正交匹配追踪(ROMP)

    主要内容: ROMP的算法流程 ROMP的MATLAB实现 一维信号的实验与结果 测量数M与重构成功概率关系的实验与结果 一.ROMP的算法流程 正则化正交匹配追踪ROMP算法流程与OMP的最大不同之 ...

  2. 救基友3(三维BFS)

    救基友记3 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描写叙述   话说CZ因为不守基道.被妖怪抓走了.好基友WP在努力讨好高富帅 ...

  3. 开源的.NET任务调度框架-HangFire

    什么是Hangfire Hangfire 是一个开源的.NET任务调度框架,目前1.6+版本已支持.NET Core.内置提供集成化的控制台,方便后台查看及监控: 另外,Hangfire包含三大核心组 ...

  4. 第三部分:Android 应用程序接口指南---第二节:UI---第九章 搜索

    第9章 搜索 在android平台上搜索是一个核心的用户功能.无论内容位于设备或网络上,用户应该能够搜索任何对它们可用的数据.为了创建一个一致的用户搜索体验,Android平台提供了一个搜索框架帮助你 ...

  5. SAP Study Notes: BW Queriy-Variables(变量)

    About Variable:1.Variable 是和InfoObject绑定的,可用于任何含有该IO的query中.2.Variable有以下几种类型:Characteristic:用于限制Cha ...

  6. Java知多少(21)this关键字详解

    this 关键字用来表示当前对象本身,或当前类的一个实例,通过 this 可以调用本对象的所有方法和属性.例如: public class Demo{ public int x = 10; publi ...

  7. Java知多少(35)Object类

    Object 类位于 java.lang 包中,是所有 Java 类的祖先,Java 中的每个类都由它扩展而来. 定义Java类时如果没有显示的指明父类,那么就默认继承了 Object 类.例如: p ...

  8. Wifi 开放系统认证和共享密钥身份认证

    记录开放系统认证和共享密钥认证的区别. 开放系统身份认证(open-systern authentication) 是802.11 要求必备的惟一方式. 由行动式工作站所发出的第一个帧被归类为auth ...

  9. Java如何清除空格?

    在Java编程中,如何清除/删除空格? 以下示例演示如何使用Util.regex.Pattern类的matcher.replaceAll(stringname)方法来删除空格. package com ...

  10. (原)android系统下绑定Server的时候报MainActivity has leaked ServiceConnection的错误

    今天在android系统下根据官方的demo代码,我们需要启动一个服务,并绑定,但在程序启动以后,老是报错:   Activity MainActivity has leaked ServiceCon ...