微信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) ...
随机推荐
- 利用python制作在Linux服务器后台定时运行的任务-邮件提醒
1. 自动任务的功能为: 定时扫描数据库中的记录,然后发邮件 代码如下 scheduleMail.py import pymysql import smtplib from email.mime.te ...
- 【SqlServer】Sqlserver中的DOS命令操作
输入osql ?查看是否支持当前版本,如果是SQL Server 2005以上用Sqlcmd , 以下用Osql连接数据库(a)Osql -S localhost -U username -P p ...
- Linux虚拟文件系统
从文件 I/O 看 Linux 的虚拟文件系统 1 引言 Linux 中允许众多不同的文件系统共存,如 ext2, ext3, vfat 等.通过使用同一套文件 I/O 系统 调用即可对 Linux ...
- [Android源码]Android源码之高仿飞鸽传书WIFI热点搜索与创建(一)
(本文详情来源:android源码 http://www.eoeandroid.com/thread-296427-1-1.html 转载请注明出处!) [Android源码分享]飞鸽传书的An ...
- openwrt 水星mw4530r-v1 搞搞搞
感觉周围最实用的搞硬件非路由器莫属,可惜配置都不咋的高,选择水星这款就是看中它的性价比和openwrt的支持,真乃刷机神器啊,还可以挂载usb就更绝了,价格没得说. 另外128mb的rom对大部分功能 ...
- IIS7 配置 PHP5.6
环境: 操作系统:Win7 & 10 (x64) 中文专业版 PHP :V5.6 首先添加IIS. 控制面板-〉程序-〉打开或关闭Windows功能 1. 勾选"Inte ...
- Approx Analytic Arealight
试着实现的基于分析方法的近似面积光源.
- linux每日命令(12):nl命令
nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 等 ...
- PentesterLab渗透演练平台
转载自: https://www.blackh4t.org/archives/1143.html http://www.91ri.org/5958.html 1. 什么是WebApp Pen ...
- MobaXterm 加装cygwin软件包
上次在<MobaXterm: SSH/X远程客户端, Xmanager的最佳免费替代品>里面介绍了MobaXterm这个Windows上的便携 多合一unix工具箱,它基于Cygwin,集 ...