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

随机推荐

MFC宏—DECLARE_DYNCREATE
DECLARE_DYNCREATE( class_name ) 参数: class_name 类的实际名字(不用引号括起来). 说明: 使用DECLARE_DYNCREATE宏可以使每个CObject ...
#if _MSC_VER > 1000 #pragma once #endif 含义
前提:MFC应用程序中,MainFrm 类头文件 MainFrm.h 中#if _MSC_VER > 1000#pragma once#endif // _MSC_VER > 1000解释 ...
HDU2389(KB10-F 二分图最大匹配Hopcroft_Karp)
Rain on your Parade Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 655350/165535 K (Java/Ot ...
Linux中编译安装软件的基本流程
1. 准备软件包源文件从互联网下载相应的软件包(以 .tar.gz 或 .tar.bz2 为后缀),将tarball文件解压到/usr/local/src目录下,并切换到软件包目录下 : 2. ./ ...
如何启动一个Vue3.x项目
1. 安装node.js 2. cd到项目目录下 3. npm run serve Node.js下载与安装(npm) Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运 ...
【学习笔记】--- 老男孩学Python，day3 while 循环运算符逻辑、赋值运算
1. 循环. while循环 while 条件: 代码块(循环体) 执行流程: 1. 判断条件是否为真. 如果真. 执行代码块 2. 再次判断条件是否为真...... 3. 当条件为假.执行else ...
Apache 、SUN、ORACLE
Apache: 全称:Apache Software Foundation 解释:apache 软件基金会.是专门为支持开源软件项目而办的一个非盈利性组织.在它所支持的Apache项目与子项目中,所发 ...
python 数据结构中的链表操作
链表的定义: 链表(linked list)是由一组被称为结点的数据元素组成的数据结构,每个结点都包含结点本身的信息和指向下一个结点的地址.由于每个结点都包含了可以链接起来的地址信息,所以用一个变量就 ...
Css 基础知识（一）
1.Css概念 CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表),Css是用来美化html标签的,相当于页面化妆. ◆样式表书写位置 2. 选择器 2.1.写法选 ...
Python技巧——list与字符串互相转换
Python技巧——list与字符串互相转换在Python的编程中,经常会涉及到字符串与list之间的转换问题,下面就将两者之间的转换做一个梳理. 1.字符串转换成list 命令:list() ...

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

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

随机推荐

热门专题