微信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) ...
随机推荐
- VMware相关服务启动关闭脚本
VMware相关服务 VMware Authonrization Service:用于启动和访问虚拟机的授权和身份验证服务 VMware DHCP Service: IP自动分配协议——它不启动 虚拟 ...
- angularjs使用ui-router切换视图, 自动滚动到顶部
ui-view Examples for autoscroll: <ui-view autoscroll/> <!-- If autoscroll present with no e ...
- Uploadify导致Chrome频繁崩溃Crash
上传功能是工作中经常会遇到的问题,应该作为开发标配的技能每个人都会. 我选用的是Uploadify 3.1.2进行上传,使用方法参考之前的一篇文章, 今天记录下一个我遇到的很神奇的bug chrome ...
- zabbix监控k8s出现的pod error status
配置zabbix客户端配置文件 vim /etc/zabbix/zabbix_agentd.conf 添加 Include=/etc/zabbix/zabbix_agentd.d/ #!/bin/b ...
- css中border-radius用法详解
border-radius:由浮点数字和单位标识符组成的长度值.border-top-left-radius --- 左上border-top-right-radius --- 右上border-bo ...
- 使用DIV弹出框的代码示例,备忘。
1.思路 使用DIV模拟弹出框,一共用三个div: divWindow: 原来的界面内容区域 divLogin:要弹出的内容区域 divBackground:给弹出内容区域做个遮罩的区域. 点击 “请 ...
- FiDDLER教程
FiDDLER教程 摘自:林猪猪的部落格 的 前端工具 1 FIDDLER的使用方法及技巧总结(连载一)FIDDLER快速入门及使用场景 2 FIDDLER的使用方法及技巧总结(连载二)FIDDLER ...
- 【网络】TCP和UDP的区别以及TCP的三次握手四次释放
一.两者区别 1.TCP面向连接的运输层协议,UDP无连接 2.TCP是可靠交付,UDP是尽最大努力交付 3.TCP面向字节流,UDP面向报文 4.TCP是点对点连接的,UDP一对一,一对多,多对多都 ...
- Java、Linux、Win 快速生成指定大小的空文件
Linux dd 命令: dd if=/dev/zero of=<fileName> bs=<一次复制的大小> count=<复制的次数> 生成 50 MB 的空文 ...
- 【WPF】点击滑动条(Slider),移动滑块(Tick)到鼠标点击的位置
问题:点击Slider控件时,滑块会自动跳到滑动条的最边缘位置,无法跳到鼠标点击的位置上. 办法:给Slider控件设置属性IsMoveToPointEnabled="True"即 ...