public function test2(){
$Weixin = new \Weixin\Controller\BaseController();
$this->assign('signPackage', $Weixin->jssdk->GetSignPackage());
$this->display();
}

html核心代码

<script type="text/javascript" src="__STATIC__/jquery-2.0.3.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<form action="{:U('doJoin')}" method="post">
<h3 class="title">参赛人员照片:</h3>
<div>
<img class="preview" src="{$vote.vote_pic|get_cover='thumb'}" alt="">
<if condition="!$vote['status']" ><button class="uploadImage" type="button" id="vote_pic">点击上传(建议上传800*600的png,jpg,或者gif格式图片)</button></if>
<input type="hidden" name="vote_pic">
</div>
<button class="bbon" type="submit" id="submit">提交</button>
</form>
<script>
wx.config({
debug: false,
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?php echo $signPackage["timestamp"];?>,
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage'
]
});
wx.ready(function () {
// 5.1 拍照、本地选图
var images = {
localId: [],
serverId: []
}; // 5.3 上传图片
$(".uploadImage").click(function(){
var that =$(this);
images.localId = [];
wx.chooseImage({
success: function (res) {
images.localId = res.localIds;
if (images.localId.length == 0) {
alert('请先使用 chooseImage 接口选择图片');
return;
}
if(images.localId.length > 1) {
alert('目前仅支持单张图片上传,请重新上传');
images.localId = [];
return;
}
var i = 0, length = images.localId.length;
images.serverId = [];
function upload() {
wx.uploadImage({
localId: images.localId[i],
success: function (res) {
i++;
that.siblings('img.preview').attr('src',images.localId[0]);
// alert('已上传:' + i + '/' + length);
images.serverId.push(res.serverId);
that.siblings('input[type=hidden]').val(images.serverId[0]);
// alert( that.siblings('input[type=hidden]').val());
if (i < length) {
upload();
}
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
}
upload();
}
});
}); $("#submit").click(function(){
$.ajax({
type: 'post',
url: $("form").attr('action') ,
data : $("form").serialize(),
dataType: 'json',
success : function(data){
if(data.status){
alert(data.info);
window.location.href = data.url;
}else{
} }
});
return false;
})
});
</script>

提交到服务器端 服务器端处理过程如下

public doJoin(){
if(IS_POST && $_POST['vote_pic']){ //提交过来的vote_pic是微信服务器端的图像资源id
$pic_id = $_POST['vote_pic'];
$return = array();
C('WEIXIN_UPLOAD') = './Uploads/Weixin/';//定义保存路径
$dir = realpath(C('WEIXIN_UPLOAD')).'/'.date('Y_m_d').'/';//为方便管理图片 保存图片时 已时间作一层目录作区分
if(!file_exists($dir)){
mkdir($dir,'0777');
}
$Weixin = new \Weixin\Controller\BaseController();
$pic_url = $Weixin->WechatAuth->mediaGet($pic_id); //获取服务器图片路径
$time = time().substr($pic_id, 9,3);
$filename = 'wx_'.$time.'.jpg'; //定义图片文件名
$Http = new \Org\Net\Http;
if($Http::curlDownload($pic_url,$dir.$filename)){//http下载图片
$this->success('提交成功',U('index'));
} } }

  

thinkphp微信开发之jssdk图片上传并下载到本地服务器的更多相关文章

  1. thinkphp达到UploadFile.class.php图片上传功能

    片上传在站点里是非经常常使用的功能.ThinkPHP里也有自带的图片上传类(UploadFile.class.php) 和图片模型类(Image.class.php).方便于我们去实现图片上传功能,以 ...

  2. [python][flask] Flask 图片上传与下载例子(支持漂亮的拖拽上传)

    目录 1.效果预览 2.新增逻辑概览 3.tuchuang.py 逻辑介绍 3.1 图片上传 3.2 图片合法检查 3.3 图片下载 4.__init__.py 逻辑介绍 5.upload.html ...

  3. 微信jssdk图片上传

    一.html页面如下: <div class="weui-cell"> <div class="weui-cell__hd"></ ...

  4. 微信JS图片上传与下载功能--微信JS系列文章(三)

    概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){ v ...

  5. nodeJs实现微信小程序的图片上传

    今天我来介绍一下nodejs如何实现保存微信小程序传过来的图片及其返回 首先wx.uploadFile绝大部分时候是配合wx.chooseImage一起出现的,毕竟选择好了图片,再统一上传是实现用户图 ...

  6. 微信小程序中图片上传阿里云Oss

    本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发.最近工作遇到一个小问题. 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意去记录一下. 第一步:配置阿里云地址: 我 ...

  7. Thinkphp整合阿里云OSS图片上传实例

    Thinkphp3.2整合阿里云OSS图片上传实例,图片上传至OSS可减少服务器压力,节省宽带,安全又稳定,阿里云OSS对于做负载均衡非常方便,不用传到各个服务器了 首先引入阿里云OSS类库 < ...

  8. jQuery图片上传前先在本地预览(不经过后端处理)

    前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...

  9. TCP客户端图片上传服务端保存本地示例

    //TCP客户端public class TCPClient { public static void main(String[] args)throws IOException { Socket s ...

随机推荐

  1. Google协作平台

    本博文的主要内容有 .Google协作平台的介绍 1.Google协作平台的介绍 https://zh.wikipedia.org/wiki/Google%E5%8D%8F%E4%BD%9C%E5%B ...

  2. poj 3294 Life Forms(后缀数组)

    题意:给你最多100个字符串,求最长的且是一半以上的字符串的公共子串,如果有多个,按字典序输出. 思路:先把各个串拼起来,中间加上一个之前未出现过的字符,然后求后缀.然后根据h数组和sa数组,求出最长 ...

  3. java继承分析

    把java学完之后有開始了一遍突然发现对于继承还是不太理解所以就做了一个測试来分析一下 <span style="font-size:18px;">class A{ p ...

  4. win主机用web.config和httpd.ini实现301重定向

    当你准备好好看这篇文章的时候,你应该已经知道了301重定向的作用与意义了,那么这里就不多加解释了. 那么我唯一想提的就是关于域名带与不带www的区别,并且301重定在其中的意义,详情:域名带与不带ww ...

  5. UITableView的简单应用介绍

    创建一个tableView视图,然后把这个视图界面添加到主界面上. _tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 20, [ ...

  6. junit 测试注解

    * @Test: 将一个 普通的方法修饰成为一个测试方法* @BeforeClass: 他会在所有的方法运行前被执行,static修饰* @AfterClass 他会在所有方法运行结束后被执行,sta ...

  7. Linux命令行编辑快捷键

    Linux命令行编辑快捷键: history 显示命令历史列表 ↑(Ctrl+p) 显示上一条命令 ↓(Ctrl+n) 显示下一条命令 !num 执行命令历史列表的第num条命令 !! 执行上一条命令 ...

  8. 21、javascript 基础

    Javascript Javascript 是一种嵌入到HTML文档的脚本语言,由浏览器解释和执行,无需编译. Javascript 是大小写敏感的,大写字母与小写字母不同. 使用“:”分号来分割每一 ...

  9. PetaPoco 存储过程

    1 执行不带参数的存储过程 public List<dynamic> ceshiProc() { string sql = @"EXEC [dbo].[p_ceshi1]&quo ...

  10. 我的网站终于连续一星期,ip数1000以上了

    相信每个程序员都有一个站长梦,我也是如此.说来惭愧,从2015年4月份开始,我投入了50块的域名费用,50块的空间费用,现在才回本. 由于终于从百度联盟的手里赚了一百块,按耐不住的菜鸟之冲动,于是决定 ...