1. <span style="font-size: 14px;"><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>发布图片</title>
  7. <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  8. <meta name="apple-mobile-web-app-capable" content="yes">
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10. <meta name="format-detection" content="telephone=no">
  11. <link rel="stylesheet" type="text/css" href="/Public/Weixin/css/common.css">
  12. </head>
  13. <body>
  14. <p>最多可添加9张作品</p>
  15. <input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片"   style="display:none;" />
  16. <div class="imglist"></div>
  17. <input type="hidden" id="img_str" name="img_str">
  18. <a id="upload_button" href="javascript:void(0);" class="uploadImage uploadbtn"><img src="/Public/Weixin/images/upload-add.png" alt=""></a>
  19. <div class="sb">发布</div>
  20. <script type="text/javascript" src="/Public/Weixin/js/jquery.min.js"></script>
  21. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  22. <script>
  23. wx.config({
  24. debug: false,
  25. appId: '{$signPackage["appid"]}',
  26. timestamp: {$signPackage["timestamp"]},
  27. nonceStr: '{$signPackage["noncestr"]}',
  28. signature: '{$signPackage["signature"]}',
  29. jsApiList: [
  30. // 所有要调用的 API 都要加到这个列表中
  31. 'chooseImage','previewImage','uploadImage','downloadImage'
  32. ]
  33. });
  34. wx.ready(function () {
  35. // 5.3 上传图片
  36. $('.uploadImage').on('click', function () {
  37. wx.chooseImage({
  38. success: function (res) {
  39. var localIds = res.localIds;
  40. syncUpload(localIds);
  41. }
  42. });
  43. });
  44. var syncUpload = function(localIds){
  45. var localId = localIds.pop();
  46. wx.uploadImage({
  47. localId: localId,
  48. isShowProgressTips: 1,
  49. success: function (res) {
  50. var serverId = res.serverId; // 返回图片的服务器端ID
  51. var str = $('#img_str').val()+serverId+',';
  52. $('.imglist').append("<img src='"+localId+"' />");
  53. $('#img_str').val(str);
  54. //其他对serverId做处理的代码
  55. if(localIds.length > 0){
  56. syncUpload(localIds);
  57. }
  58. if($('.imglist img').size() >= 9) {
  59. $("#upload_button").hide();
  60. }
  61. },
  62. fail: function (res) { alert(JSON.stringify(res)); }
  63. });
  64. };
  65. });
  66. </script>
  67. <script>
  68. $(".sb").click(function(){
  69. var imglist = $(".imglist").html();
  70. if(imglist == "" || imglist == null) {
  71. alert("请添加图片");
  72. return false;
  73. } else {
  74. if($(".imglist").find('img').size() >9) {
  75. alert("图片只允许上传9张!");
  76. return false;
  77. }
  78. var img_str = $('#img_str').val();
  79. }
  80. $.post("{:U('Test/wxupload')}", {img_str:img_str},function(data){
  81. window.location.href = "__URL__/test";
  82. });
  83. });
  84. </script>
  85. </body>
  86. </html></span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>发布图片</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="/Public/Weixin/css/common.css">
</head>
<body>
<p>最多可添加9张作品</p>
<input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片" style="display:none;" />
<div class="imglist"></div>
<input type="hidden" id="img_str" name="img_str">
<a id="upload_button" href="javascript:void(0);" class="uploadImage uploadbtn"><img src="/Public/Weixin/images/upload-add.png" alt=""></a>
<div class="sb">发布</div>
<script type="text/javascript" src="/Public/Weixin/js/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
debug: false,
appId: '{$signPackage["appid"]}',
timestamp: {$signPackage["timestamp"]},
nonceStr: '{$signPackage["noncestr"]}',
signature: '{$signPackage["signature"]}',
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'chooseImage','previewImage','uploadImage','downloadImage'
]
});
wx.ready(function () {
// 5.3 上传图片
$('.uploadImage').on('click', function () {
wx.chooseImage({
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) {
var serverId = res.serverId; // 返回图片的服务器端ID
var str = $('#img_str').val()+serverId+',';
$('.imglist').append("<img src='"+localId+"' />");
$('#img_str').val(str);
//其他对serverId做处理的代码
if(localIds.length > 0){
syncUpload(localIds);
}
if($('.imglist img').size() >= 9) {
$("#upload_button").hide();
}
},
fail: function (res) { alert(JSON.stringify(res)); }
});
};
});
</script> <script> $(".sb").click(function(){
var imglist = $(".imglist").html(); if(imglist == "" || imglist == null) {
alert("请添加图片");
return false;
} else {
if($(".imglist").find('img').size() >9) {
alert("图片只允许上传9张!");
return false;
}
var img_str = $('#img_str').val();
} $.post("{:U('Test/wxupload')}", {img_str:img_str},function(data){
window.location.href = "__URL__/test";
});
}); </script>
</body>
</html>

后台处理 testController.php

  1. <span style="font-size: 14px;">    public function test() {
  2. $signPackage = $this->getSignPackage();
  3. $this->assign('signPackage', $signPackage);
  4. $this->display('test');
  5. }</span>
    public function test() {
$signPackage = $this->getSignPackage();
$this->assign('signPackage', $signPackage);
$this->display('test');
}
  1. <span style="font-size: 14px;">public function wxupload() {
  2. header('Content-type:application/json;chartset=utf-8');
  3. $img_str = I('post.img_str', '', 'string');
  4. $uploadROOT     = realpath(THINK_PATH.'../Public/');//定义保存路径
  5. $uploadPath     = $uploadROOT."/Upload/".date('Y-m-d')."/";//为方便管理图片 保存图片时 已时间作一层目录作区分
  6. if(!file_exists($uploadPath)) mkdir($uploadPath,  0775);
  7. $savepath = '/Public/Upload/' . date('Y-m-d').'/';
  8. $img_str = rtrim($img_str, ',');
  9. $img_arr = explode(',', $img_str);
  10. $str = ''; //sql语句字符串
  11. $imgs = array();
  12. foreach($img_arr as $v) {
  13. $imgs[] = $this->doWechatPic($v);
  14. }
  15. $str = ''; //sql语句字符串
  16. foreach($imgs as $v) {
  17. $str .= "(NULL," . $this->_user_info_id . "," . $publish_id . ",'" . $v . "')" . ",";
  18. }
  19. $sql = "INSERT INTO img(`id`,`userid`,`publish_id`,`img_url`) values" . rtrim($str, ',');
  20. $res = M()->query($sql);
  21. if($res) {
  22. $data = array('errcode' => 0, 'msg' => '成功!');
  23. } else {
  24. $data = array('errcode' => 1, 'msg' => '失败!');
  25. }
  26. exit( JSON($data));
  27. }
  28. /*
  29. * 从微信服务器获取图片流
  30. */
  31. public function doWechatPic($serverId){//media_id=jlJs_iQIOA-TKLuhk4nCdPEdXnJ6paIeToO8vr-WUGvz05-6i5n498EzI232xSxn
  32. $media_id = $serverId;//提交过来的serverId即$media_id
  33. $access_token    = $this->_get_wx_access_token_address( false );//获取access_token值
  34. $pic_url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$access_token}&media_id={$media_id}";
  35. $filebody = file_get_contents($pic_url);//通过接口获取图片流
  36. $filename = uniqid().'.jpg';            //定义图片名字及格式
  37. return $this->saveFile($filename, $filebody);
  38. }
  39. /*
  40. * 定义文件路径,写入图片流
  41. */
  42. public function saveFile($filename, $filecontent){
  43. $uploadROOT     = realpath(THINK_PATH.'../Public/');//定义保存路径
  44. $uploadPath     = $uploadROOT."/Upload/".date('Y-m-d')."/";//为方便管理图片 保存图片时 已时间作一层目录作区分
  45. if(!file_exists($uploadPath)) mkdir($uploadPath,  0775);
  46. $upload_dir = '/Public/Upload/' . date('Y-m-d'); //保存路径,以时间作目录分层
  47. $savepath = '.'.$upload_dir.'/'.$filename;
  48. if(file_put_contents($savepath, $filecontent)){//写入图片流生成图片
  49. return $upload_dir."/".$filename;//返回图片路径
  50. }else{
  51. exit(JSON('save failed'));
  52. }
  53. } </span>
    public function wxupload() {
header('Content-type:application/json;chartset=utf-8');
$img_str = I('post.img_str', '', 'string');
$uploadROOT = realpath(THINK_PATH.'../Public/');//定义保存路径
$uploadPath = $uploadROOT."/Upload/".date('Y-m-d')."/";//为方便管理图片 保存图片时 已时间作一层目录作区分
if(!file_exists($uploadPath)) mkdir($uploadPath, 0775); $savepath = '/Public/Upload/' . date('Y-m-d').'/';
$img_str = rtrim($img_str, ','); $img_arr = explode(',', $img_str);
$str = ''; //sql语句字符串
$imgs = array(); foreach($img_arr as $v) {
$imgs[] = $this->doWechatPic($v);
} $str = ''; //sql语句字符串
foreach($imgs as $v) {
$str .= "(NULL," . $this->_user_info_id . "," . $publish_id . ",'" . $v . "')" . ",";
}
$sql = "INSERT INTO img(`id`,`userid`,`publish_id`,`img_url`) values" . rtrim($str, ',');
$res = M()->query($sql); if($res) {
$data = array('errcode' => 0, 'msg' => '成功!');
} else {
$data = array('errcode' => 1, 'msg' => '失败!');
}
exit( JSON($data));
} /*
* 从微信服务器获取图片流
*/
public function doWechatPic($serverId){//media_id=jlJs_iQIOA-TKLuhk4nCdPEdXnJ6paIeToO8vr-WUGvz05-6i5n498EzI232xSxn
$media_id = $serverId;//提交过来的serverId即$media_id
$access_token = $this->_get_wx_access_token_address( false );//获取access_token值 $pic_url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$access_token}&media_id={$media_id}";
$filebody = file_get_contents($pic_url);//通过接口获取图片流 $filename = uniqid().'.jpg'; //定义图片名字及格式
return $this->saveFile($filename, $filebody);
} /*
* 定义文件路径,写入图片流
*/
public function saveFile($filename, $filecontent){ $uploadROOT = realpath(THINK_PATH.'../Public/');//定义保存路径
$uploadPath = $uploadROOT."/Upload/".date('Y-m-d')."/";//为方便管理图片 保存图片时 已时间作一层目录作区分
if(!file_exists($uploadPath)) mkdir($uploadPath, 0775);
$upload_dir = '/Public/Upload/' . date('Y-m-d'); //保存路径,以时间作目录分层
$savepath = '.'.$upload_dir.'/'.$filename; if(file_put_contents($savepath, $filecontent)){//写入图片流生成图片
return $upload_dir."/".$filename;//返回图片路径
}else{
exit(JSON('save failed'));
} }

需要注意的是 access_token,signPackage参数不能错误

JSSDK图像接口多张图片上传下载并将图片流写入本地的更多相关文章

  1. Python接口自动化——文件上传/下载接口

    〇.前言 文件上传/下载接口与普通接口类似,但是有细微的区别. 如果需要发送文件到服务器,例如:上传文档.图片.视频等,就需要发送二进制数据,上传文件一般使用的都是 Content-Type: mul ...

  2. python2.7 操作ceph-cluster S3对象接口 实现: 上传 下载 查询 删除 顺便使用Docker装个owncloud 实现UI管理

    python version:    python2.7 需要安装得轮子: botofilechunkio command: yum install python-pip&& pip ...

  3. 执行asp.net上传下载Excel时出现“未在本地计算机上注册“Microsoft.ACE.Oledb.12.0”提供程序。(System.Data)”错误

    服务器没有安装Office导致的错误,如何不想安装庞大的Office,可以下载安装: Microsoft Office Access Database Engine 2007 http://downl ...

  4. 文件上传下载(C#,web,asp.net)

    目的:在浏览器页面启动上传下载CS软件,实现文件的批量下载与上传. 技术路线: 开发上传下载客户端CS程序与注册程序,压缩放到服务器端指定位置: 开发服务器端程序用以接收上传请求,压缩放到服务器端: ...

  5. asp.net 模拟CURL调用微信公共平台API 上传下载多媒体文件接口

    FormItem类 public class FormItem { public string Name { get; set; } public ParamType ParamType { get; ...

  6. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

  7. .Net Core 图片文件上传下载

    当下.Net Core项目可是如雨后春笋一般发展起来,作为.Net大军中的一员,我热忱地拥抱了.Net Core并且积极使用其进行业务的开发,我们先介绍下.Net Core项目下实现文件上传下载接口. ...

  8. js移动端/H5同时选择多张图片上传并使用canvas压缩图片

    最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...

  9. Jmeter 上传下载文件

    最近很多同学都在问jmeter上传.下载文件的脚本怎么做,要压测上传.下载文件的功能,脚本怎么做,网上查了都说的很含糊,这次呢,咱们就好好的把jmeter的上传下载文件好好缕缕,都整明白了,怎么个过程 ...

随机推荐

  1. #if defined 和 #if ! defined 的用法

    背景:MFC初学,头文件中有#if !defined(AFX_HELLOMFC_H__706D36F5_2F1B_40AC_8BE9_0BD6A1D7BBDE__INCLUDED_)#define A ...

  2. jsp、css中引入外部资源相对路径的问题

    在jsp页面中添加base,可用相对路径: <% String path = request.getContextPath(); String basePath = request.getSch ...

  3. CentOS7 配置静态IP

    在mini安装完CentOS7后,如果想让电脑能够上网,则必须要进行网络配置. 本虚拟机使用NAT模式上网,网络配置步骤如下: ifconfig命令查到机器网卡: vi /etc/sysconfig/ ...

  4. CSS学习笔记04 CSS文字排版常用属性

    字体样式属性 font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位.其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使 ...

  5. spring-bean实例化三种方式

    在spring中,bean的示例化有三种方式. 1.使用类的无参构造函数创建 2.使用静态工厂方式创建 3.使用实例化工厂方式创建. 具体代码如下 静态工厂方式: Bean2.java package ...

  6. Thinkphp5+PHPExcel实现批量上传表格数据

    1.首先要下载PHPExcel放到vendor文件夹下,我的路径是:项目/vendor/PHPExcel/,把下载的PHPExcel文件放在这里 2.前端代码 <!DOCTYPE html> ...

  7. 设计模式(12)--Proxy(代理模式)--结构型

    作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.模式定义: 代理模式是对象的结构模式.代理模式给某一个对象提供一个代理对象,并由代理对象控制对原对象的引用. ...

  8. short、int、long、float、double区别

    一.基本数据类型的特点,位数,最大值和最小值.1.基本类型:short 二进制位数:16 包装类:java.lang.Short 最小值:Short.MIN_VALUE=-32768 (-2的15此方 ...

  9. css3 content 特殊字符和符号

    基本形状 ▲ 9650 25B2 ► 9658 25BA ► 9658 25BA ▼ 9660 25BC◄ 9668 25C4 ❤ 10084 2764 ✈ 9992 2708 ★ 9733 2605 ...

  10. 工作记录(JS向textarea添加固定内容、通过固定字符将字符串分割为数组)

    第一个是在 textarea 输入框中添加固定的内容. 代码如下: <textarea id="text" cols="30" rows="10 ...