微信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) ...
随机推荐
- Eclipse 个人使用配置
个人最喜欢使用的是eclipse,但是每次有新的版本或者是在不同的电脑上都要一遍一遍的配置.下面收集自己每次用eclipse需要注意配置的地方: 快捷键只需要修改一个code assitant 修改显 ...
- asp.net core2->2.1 webapi 进行了重大变更
传统的在 启动时候 使用Mvc路由的配置不再有效.而是基于Attribute的声明标注进行配置路由.
- Variable used in lambda expression should be final or effectively final
Lambda与匿名内部类在访问外部变量时,都不允许有修改变量的倾向,即若: final double a = 3.141592; double b = 3.141592; DoubleUnaryOpe ...
- EasyUI 的 combotree 加载数据后折叠起来,并且只允许单击子节点的写法
$(source).combotree({ url: '', width: kuan, valueField: 'id', textField: 'text', onlyLeafCheck: true ...
- shiny: Web Application Framework for R
shiny: Web Application Framework for R 基于R语言的一个web框架,适用于数据分析与图表绘画展示类型的网站.
- python文件的基础操作
import os print(,'-')) print(os.getcwd()) print(,'-')) print(os.listdir()) print(,'-')) print(os.lis ...
- linux每日命令(27):chmod命令
chmod命令用于改变linux系统文件或目录的访问权限.用它控制文件或目录的访问权限.该命令有两种用法.一种是包含字母和操作符表达式的文字设定法:另一种是包含数字的数字设定法. Linux系统中的每 ...
- 用Jmeter+Badboy+Fiddler做接口测试
用Jmeter+Badboy+Fiddler做接口测试 2016-12-05 目录: 1 简介2 Badboy录制3 Jmeter打开Badboy脚本4 用Fiddler抓请求,补充完善脚本5 测试中 ...
- Django登陆以后重定向到请求登陆的页面
登陆和注销操作在网页编程上很常见,这两个操作经常需要在操作成功以后转入发出请求的页面. 比如用户正在浏览一篇文章,发现下载该文章的附件需要登录才能进行,这时候点击登陆链接转入登陆页面,输入用户名密码登 ...
- Git常见报错及解决方案
报错一: You have not concluded your merge (MERGE_HEAD exists). Please, commit your changes before you c ...