JSSDK图像接口多张图片上传下载并将图片流写入本地

<span style="font-size: 14px;"><!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></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

<span style="font-size: 14px;"> public function test() {
$signPackage = $this->getSignPackage();
$this->assign('signPackage', $signPackage);
$this->display('test');
}</span>

    public function test() {

	$signPackage = $this->getSignPackage();

	$this->assign('signPackage', $signPackage);

	$this->display('test');

    }

<span style="font-size: 14px;">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'));
}
} </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图像接口多张图片上传下载并将图片流写入本地的更多相关文章

Python接口自动化——文件上传/下载接口
〇.前言文件上传/下载接口与普通接口类似,但是有细微的区别. 如果需要发送文件到服务器,例如:上传文档.图片.视频等,就需要发送二进制数据,上传文件一般使用的都是 Content-Type: mul ...
python2.7 操作ceph-cluster S3对象接口实现：上传下载查询删除顺便使用Docker装个owncloud 实现UI管理
python version: python2.7 需要安装得轮子: botofilechunkio command: yum install python-pip&& pip ...
执行asp.net上传下载Excel时出现“未在本地计算机上注册“Microsoft.ACE.Oledb.12.0”提供程序。(System.Data)”错误
服务器没有安装Office导致的错误,如何不想安装庞大的Office,可以下载安装: Microsoft Office Access Database Engine 2007 http://downl ...
文件上传下载（C#，web，asp.net）
目的:在浏览器页面启动上传下载CS软件,实现文件的批量下载与上传. 技术路线: 开发上传下载客户端CS程序与注册程序,压缩放到服务器端指定位置: 开发服务器端程序用以接收上传请求,压缩放到服务器端: ...
asp.net 模拟CURL调用微信公共平台API 上传下载多媒体文件接口
FormItem类 public class FormItem { public string Name { get; set; } public ParamType ParamType { get; ...
微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比
在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...
.Net Core 图片文件上传下载
当下.Net Core项目可是如雨后春笋一般发展起来,作为.Net大军中的一员,我热忱地拥抱了.Net Core并且积极使用其进行业务的开发,我们先介绍下.Net Core项目下实现文件上传下载接口. ...
js移动端/H5同时选择多张图片上传并使用canvas压缩图片
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
Jmeter 上传下载文件
最近很多同学都在问jmeter上传.下载文件的脚本怎么做,要压测上传.下载文件的功能,脚本怎么做,网上查了都说的很含糊,这次呢,咱们就好好的把jmeter的上传下载文件好好缕缕,都整明白了,怎么个过程 ...

随机推荐

centos7配置java环境
首先自行下载jdk的tar.gz的包,上传至相应服务器目录下,比如我的是:/usr/java下,然后解压缩,之后进行如下操作: 注意要修改/etc/profile文件,在末尾添加内容: export ...
Mac破解Sublime Text 3 3176
## Sublime Text 3 Serial key build is 3176 > * Added these lines into /etc/hosts 127.0.0.1 www.su ...
Failed to unregister the JMX name: org.apache.commons.dbcp2:name=xxx,type=BasicDataSource
把datesource的bean的class由 org.apache.commons.dbcp2.BasicDataSource 改成 org.apache.tomcat.dbcp.dbcp.Basi ...
JDBC流程
最近要学习Mybatis的源码,因此对JDBC的使用进行总结. 一.JDBC概述 JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的Java ...
【16】命令模式（Command Pattern）
一.前言最近项目中发现,对于设计模式的了解是必不可少的,当然对于设计模式的应用那更是重要,可以说是否懂得应用设计模式在项目中是衡量一个程序员的技术水平,因为对于一个功能的实现,高级工程师和初级工程师 ...
layui实现复选框全选，反选
html <div class="layui-input-inline"> <input type="checkbox" class=&quo ...
js-JavaScript实现数字的千位分隔符
function thousandSeparator(num) { return num && (num .toString().indexOf('.') != -1 ? num.to ...
element-ui input组件源码分析整理笔记（六）
input 输入框组件源码: <template> <div :class="[ type === 'textarea' ? 'el-textarea' : 'el-in ...
SQLServer 中的身份验证及登录问题
SQLServer 中的身份验证及登录问题 by:授客 QQ:1033553122 身份验证 SQL Server 支持两种身份验证模式,即Windows 身份验证模式和混合模式. Windows 身 ...
C#/Net定时导出Excel并定时发送到邮箱
一.定时导出Excel并定时发送到邮箱首先我们先分析一下该功能有多少个小的任务点:1.Windows计划服务 2.定时导出Excel定指定路径 3.定时发送邮件包含附件接下来我们一个个解决 ...

JSSDK图像接口多张图片上传下载并将图片流写入本地

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

随机推荐

热门专题