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的上传下载文件好好缕缕,都整明白了,怎么个过程 ...

随机推荐

SqlSession对象之StatementHandler
上一篇讲了SqlSession对象中的Executor,接下来将对SqlSession的另一个对象StatementHandler进行讲解. 一.StatementHandler介绍 Statemen ...
python正则表达式贪婪与非贪婪模式
之前做程序的时候看到过正则表达式的贪婪与非贪婪模式,今天用的时候就想不起来了,现在这里总结一下,以备自己以后用到注意. 1.什么是正则表达式的贪婪与非贪婪匹配如:String str="a ...
Vue中改变对象的注意事项
数组更改注意事项 Vue无法检测到以下方式变动的数组当你利用索引直接设置一个项时,例如:vm.items[index] = newValue 当你修改数组的长度时,例如:vm.items.lengt ...
Django. No changes detected when "makemigrations"
在修改了models.py后,有些用户会喜欢用python manage.py makemigrations生成对应的py代码. 但有时执行python manage.py makemigration ...
mac 安装 mysql.tar.gz
解压目录到 MySQL 默认安装路径 /usr/local/mysql 下, /usr/local路径不存在时, 先 sudo mkdir /usr/local 创建. # 移动解压后的二进制包到安装 ...
Python笔记（四）：异常处理机制与 open（）
(一) 异常处理机制概述就像日常生活中会遇到各种意外情况一样(例如:你可能考虑过如果中了500w该怎么做),代码运行过程中也会遇到这种意外情况,python提供了这么一种机制,处理意外情况(就像如 ...
Centos 7 安装GNOME桌面环境
第一步:列出可安装的桌面环境 [root@local ~]# yum grouplist 第二步:安装GNOME及相应桌面管理工具 [root@local ~]# yum group info &qu ...
白盒测试实践-DAY1
时间:2017.12.11 地点:软件学院成员:张玉.周静.张双双会议内容:讨论题目要求,分配任务针对第一阶段的任务进行部署,共同学习白盒测试方法,根据自己选择的系统--餐厅网站,针对其中的管理 ...
qtcreator minggw 支持c++11
pro文件添加 QMAKE_CXXFLAGS += -std=c++11
Git 命令快速浏览
Git 命令快速浏览创建 Git 可管理的仓库 git init 查看当前仓库的状态 git status 添加到仓库,实际上是添加到暂存区 git add [-A | --all] git add ...

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

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

随机推荐

热门专题